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

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

黄舟
Libérer: 2017-07-20 09:52:54
original
26686 Les gens l'ont consulté

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;
}
Copier après la connexion

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 以及更早的版本 */ }
Copier après la connexion

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
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal