web-dev-qa-db-fra.com

Comment rendre une image en HTML transparent?

J'ai un fichier HTML et je veux mettre une image. L'image doit être transparente. Ce que je fais maintenant - en premier lieu, l'image, et ensuite, le texte et les autres images apparaissent. Comment ajouter une image transparente en HTML? Ceci est mon code maintenant:

<img src="result_files\image003.png" alt="some_text"/>
htmlcssimagebackground
5
petko_stankoski

Essayez d'utiliser l'opacité (et filtrer pour IE)

<img src="result_files\image003.png" alt="some_text" style="opacity:0.4;filter:alpha(opacity=40);"/>

Maintenant, je comprends votre question, la réponse ressemble à ceci:

 <div style="background:url(image.jpg)"> the content here </div>
17
Martin Borthiry

Voici comment le rendre transparent, le coller dans votre javascript et le modifier à votre guise.

    <a href="http://www.hlgjyl888.com/data/wallpapers/30/WDF_780770.png"><img onmouseover="bigImg(this)" onmouseout="normalImg(this)" src="http://www.hlgjyl888.com/data/wallpapers/30/WDF_780770.png" style="position:fixed; right:10px; bottom:20px; width:80px; height:80px; border:none; cursor:pointer; background:none;"></a>

        <script>
                function bigImg(x) {
                x.style.height = "120px";
                x.style.width = "120px";
                x.style.opacity = "0.2";
        }

                function normalImg(x) {
                x.style.height = "80px";
                x.style.width = "80px";
                x.style.opacity = "100";
                }
        </script>

x.style.opacity indique au navigateur de régler l'opacité. Si vous copiez ceci dans votre document, vous devez savoir quelques autres choses ...

style="position:fixed; right:10px; bottom:20px; Le positionne en bas à droite de la page.

cursor:pointer; Fait que le curseur reste un pointeur sur tous ou presque tous les navigateurs.

J'espère que cela vous aide!

0
A guy

Utilisez l'opacité de la propriété CSS ou rendez le png transparent dans un éditeur d'image.

0
pamojarpan

si vous voulez que l'image soit le fond, devrait être

HTML

<div class="content">
...content...
</div>

CSS

.content {
background-image:url('imageurl.jpg');
}
0
MCSI