javascript:
function canUseWebp(){
let elem=document.createElement('canvas');
if(!!(elem.getContext&&elem.getContext('2d'))){
return elem.toDataURL('image/webp').indexOf('data:image/webp')==0;
}
return false;
}
window.onload=function(){
let images=document.querySelectorAll('[data-bg]');
for(let i=0;i<images.length;i++){
let image=images[i].getAttribute('data-bg');
images[i].style.backgroundImage='url('+image+')';
}
let isitFirefox=window.navigator.userAgent.match(/Firefox\/([0-9]+)\./);
let firefoxVer=isitFirefox?parseInt(isitFirefox[1]):0;
if(canUseWebp()||firefoxVer>=65){
let imagesWebp=document.querySelectorAll('[data-bg-webp]');
for(let i=0;i<imagesWebp.length;i++){
let imageWebp=imagesWebp[i].getAttribute('data-bg-webp');
imagesWebp[i].style.backgroundImage='url('+imageWebp+')';
}
}
};
html:
<div class="item" style="background-image:url('/img/banners/banner2.webp');" data-bg="/img/banners/banner2.jpg" data-bg-webp="/img/banners/banner2.webp"></div>
пример программного вывода:
function attr_background_image($image,$dir,$add=''){
$html='';
$image_path=ROOT_HTTP.$dir.$image;
$image_pathinfo=pathinfo($image_path);
$ext=($image_pathinfo['extension']=='jpg')?'jpeg':$image_pathinfo['extension'];
if(USE_WEBP==1&&$ext!='svg'&&file_exists(ROOT_DIR.$dir.$image_pathinfo['filename'].'.webp')){
$html.=' style="background-image:url(\''.ROOT_HTTP.$dir.$image_pathinfo['filename'].'.webp\');" data-bg="'.ROOT_HTTP.$dir.$image.'" data-bg-webp="'.ROOT_HTTP.$dir.$image_pathinfo['filename'].'.webp"';
}
else{
$html.=' style="background-image:url(\''.ROOT_HTTP.$dir.$image.'\');'.$add.'"';
}
return $html;
}
$block_bg='';
if($block['photo']||$block['bgcolor']){
if($block['photo']){
$bgcolor='';
if($block['bgcolor']){
$bgcolor.='background-color:'.$block['bgcolor'].';';
}
$block_bg=attr_background_image($block["photo"],IMAGES_BLOCKS_DIR,$bgcolor);
}
elseif($block['bgcolor']){
$block_bg.=' style="';
$block_bg.='background-color:'.$block['bgcolor'].';';
$block_bg.='"';
}
}
или
<div class="item"<?=attr_background_image($item["photo"],IMAGES_BANNERS_DIR)?>>
https://webinmind.ru/javascript/webp-to-background-image
Используется border-image-source
и border-image-slice
header{
height:800px;
background:url("../images/header.jpg") no-repeat top center;
background-size:cover;
box-sizing:border-box;
padding-top:80px;
position:relative;
&:after,&:before{
content:'';
display:block;
width:~"calc(100% - 60px)";
height:~"calc(100% - 45px)";
position:absolute;
border:3px solid @color_gold;
border-image-source:linear-gradient(90deg,#dcae72 0%,#f9a73b 27.72%,#dcae72 54.07%,#ee8f13 78.85%,#dcae72 101.19%);
border-image-slice:1;
box-sizing:border-box;
}
&:after{
top:15px;
left:20px;
}
&:before{
top:30px;
left:40px;
}
}
Для тени используется -webkit-filter
вместо text-shadow
.l1,.l2{
background:linear-gradient(91.72deg,#ffce8f 3.54%,#f9a73b 24.85%,#f9a73b 35.35%,#ad6e24 41.86%,#ee8f13 50.91%,#ffb452 76.88%,#ae6402 99.59%);
-webkit-text-fill-color:transparent;
-webkit-background-clip:text;
-webkit-filter:drop-shadow(1px 1px @color_black);
}