Maison  >  Article  >  interface Web  >  Comment définir la transparence de l'image d'arrière-plan ?

Comment définir la transparence de l'image d'arrière-plan ?

黄舟
黄舟original
2017-07-20 09:52:5426656parcourir

Comme mentionné, la transparence de l'image elle-même ne peut pas être modifiée pour le moment. L'image est écrite en CSS avec background-image. Existe-t-il un moyen de définir la transparence ?

div{
    position: relative;        
}
div:after{
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: url(...);
    opacity: 0.5;
}

L'image d'arrière-plan est en png avec transparence. L'élément

définit la transparence comme arrière-plan, et un autre élément le recouvre et y fait une apparition invitée, prétendant être le contenu de cet élément.

L'attribut d'opacité du CSS peut définir l'attribut de transparence de l'image

#div{
    background-image: url(img.png);
    opacity:0.4;
    filter:alpha(opacity=40);/* 针对 IE8 以及更早的版本 */ }

ne peut pas modifier la transparence de l'image elle-même. Vous pouvez uniquement modifier la transparence de l'ensemble du DIV pour y parvenir. un effet visuel similaire :
1.attribut opacity
2. Si la compatibilité le permet, utilisez le filtre css3 filter-webkit-filter (différent du filtre IE précédent).

Regardez comment ce site Web est mis en œuvre

Opacity in CSS background images

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn