Wie kann ich ein Bild hinzufügen, das ein IMG-Tag überlagert?

Gibt es eine Möglichkeit in CSS, einen Bildhintergrund über das Bild eines img-Tags hinzuzufügen?Wie kann ich ein Bild hinzufügen, das ein IMG-Tag überlagert?

Ich habe einen Tag auf meiner Seite ähnlich wie

<img src="image.jpg" alt="" />

und meine CSS ist wie folgt:

.field img {width: 354px; min-width: 354px; height: 200px; object-fit: cover;}

Ich kann nicht bequem den HTML-Code bearbeiten, so hoffe ich, zu finden eine CSS-Lösung. Gibt es etwas, das ich diesem CSS hinzufügen kann, um ein Hintergrundbild über das Bild zu überlagern? Ich plane etwas, das wie ein transparenter "Play" -Button über Bildern aussieht, die mit Videos verlinkt sind.

Es gibt viele Ideen online, die diese Frage beantworten, aber ich habe nicht gesehen, dass ein extra div nicht erfordert.

Quelle

2017-04-18 Brendan

eine Play-Taste? Wo steht es in deinem HTML? –

Ihre Frage ist nicht klar, hier kommt eine lustige Antwort oder zumindest nutzlos Stil:

Bild auf Null bemessen und auch in den Hintergrund angewendet.
padding zeigen den Hintergrund
einige zusätzliche BG-Bild (linear-Gradient) eine gefälschte Taste zu ziehen.
tabindex

img { 
 
    margin: 1em; 
 
    cursor: pointer; 
 
    height: 0; 
 
    width: 0; 
 
    padding: 100px 150px; 
 
    background: linear-gradient(-35deg, transparent 50%, red 51%) no-repeat center 100px, linear-gradient(35deg, red 50%, transparent 51%) no-repeat center 80px, linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.2)), url(http://lorempixel.com/300/200/people/9); 
 
    background-size: 30px 20px, 30px 20px, auto, auto; 
 
} 
 

 
img:hover { 
 
    background: linear-gradient(-35deg, transparent 50%, white 51%) no-repeat center 100px, linear-gradient(35deg, white 50%, transparent 51%) no-repeat center 80px, linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.2)), url(http://lorempixel.com/300/200/people/9); 
 
    background-size: 30px 20px, 30px 20px, auto, auto; 
 
} 
 

 
img:focus { 
 
    background: linear-gradient(-35deg, transparent 100%, red 0%) no-repeat center 100px, linear-gradient(35deg, red 0%, transparent 0%) no-repeat center 80px, linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), url(http://lorempixel.com/300/200/people/9); 
 
    background-size: 30px 20px, 30px 20px, auto, auto; 
 
}

<img src="http://lorempixel.com/300/200/city/9" alt="play" tabindex="0" />

zu einem Video zu verknüpfen Fokus zu fangen, müssen Sie einen Link ... :) CSS nicht diese

Quelle

2017-04-18 19:37:23

macht Ich glaube, so etwas sollte tun. Works OK an meinem Ende

<style> 
.overlay { 
    background-image: url("background.jpg"); 
    background-repeat: no-repeat; 
    width: 128px; 
    height: 128px; 
} 
</style> 

<img src="overlay.png" class="overlay" width="128" height="128" />

Quelle

2017-04-18 19:55:17

Wenn alle Ihre Bilder in einem separaten Behälter sind, können Sie mit dem Spiel: nach Pseudo-Selektor in CSS wie folgt aus:

#myimages li { 
 
    display: block; 
 
    position: relative; 
 
    float: left; 
 
    margin: 5px; 
 
} 
 

 
#myimages li:after { 
 
    content: ''; 
 
    display: block; 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    background: url("data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjMDAwMDAwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTAwIDEwMDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwYXRoIGQ9Ik04My4xLDQ0LjJMMjIuOCw5LjljLTIuMi0xLjItNC40LTEuMi02LjQsMGMtMiwxLjItMi45LDMuNC0yLjksNS42djY4LjhjMCwyLjIsMS4yLDQuNCwyLjksNS42YzEsMC41LDIuMiwxLDMuNCwxICBjMS4yLDAsMi4yLTAuNSwyLjktMWw2MC4zLTM0LjNjMi4yLTEuMiwzLjQtMy40LDMuNC01LjZTODUuMyw0NS43LDgzLjEsNDQuMnoiLz48L3N2Zz4=") left top no-repeat; 
 
    opacity: .5; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
</head> 
 
<body> 
 
    <ul id="myimages"> 
 
    <li><img src="http://lorempixel.com/100/100/animals"></li> 
 
    <li><img src="http://lorempixel.com/100/100/cats"></li> 
 
    <li><img src="http://lorempixel.com/100/100/city"></li> 
 
    </ul> 
 
</body> 
 
</html>

Es ist nur ein sehr einfaches Beispiel. In Ihrer Situation könnte das Elternelement des Bildes ein Anker-Tag sein, das auf die Video-URL verweist.

Quelle

2017-04-18 20:11:36 ARS81

Unter der Annahme, dass das Bild innerhalb eines <a> Tages sein würde (da es zu den Videos Links), wäre es nicht sinnvoll sein, dass Sie den Anker-Tag als Block, Stil, dann einen Play-Taste Stil durch :before oder :after pseudo anwenden Elemente?

Check it out:

<style> 
    .field { 
     display: inline-block; 
     position: relative; 
    } 
    .field:before { 
     content: ""; 
     display: inline-block; 
     border-left: 50px solid red; 
     border-top: 30px solid transparent; 
     border-bottom: 30px solid transparent; 
     position: absolute; 
     top: 50%; 
     left: 50%; 
     transform: translate(-50%, -50%); 
    } 
    .field:hover:before { 
     border-left-color: blue; 
    } 
    .field:focus:before { 
     border-left-color: transparent; 
    } 
</style> 
<a class="field"> 
    <img src="https://lorempixel.com/200/200/" alt=""> 
</a>

Sie ein Hintergrundbild verwenden kann, oder so ziemlich alles, was man im Innern des Pseudo-Element kann die Play-Taste illustrieren. Ich hoffe, das kann nützlich sein!

Quelle

2017-04-18 20:14:51

Wie kann ich ein Bild hinzufügen, das ein IMG-Tag überlagert?

Antwort

Verwandte Themen