Wie Sie ein gradient/filter, um das Bild im CSS

Habe ich ein Bild direkt hier:

Wie Sie ein gradient/filter, um das Bild im CSS

und ich will zu replizieren, die css-Stile in die website theverge.com (siehe Bild unten)

Wie Sie ein gradient/filter, um das Bild im CSS

Dass ich diese in meinem blog (auf der Hauptseite), weil im, der versucht zu replizieren, was die website theverge.com haben. Es ist wie mit dem Titel der post und der name des Autors über die semi-transparent Farbverlauf und featured image.

bitte helfen.

hier ist die Struktur meiner html -

http://jsfiddle.net/Kareen/kwPP8/2/

<div class="content">
    <h3>Some Title Goes Here</h3>
    <div>Author: Bill Jones</div>
    <img src="http://lorempixel.com/300/200/nature/5" />           
</div>
InformationsquelleAutor Kareen Lagasca | 2014-03-08
  1. 7

    Mit der aktuellen Struktur (die Sie angeben ist erforderlich) ein pseudo-element positioniert über dem Haupt-div würde den trick tun.

    Hinweis: ich bin nur die Lösung der overlay-Problem. Sie würden noch brauchen, um die position des text-Elemente.
    Idealerweise Umstrukturierung der HTML wäre natürlich am besten.

    JSfiddle Demo

    CSS

    * {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.content {
    position: relative;
    margin:10px;
    border:1px solid grey;
        display: inline-block;
}

.content img {
    display: block;
}

.content:after {
    position: absolute;
    content:"";
    height:100%;
    width:100%;
    top:0;
    left:0;
    background: linear-gradient(to bottom, rgba(255,0,0,0) 0%,rgba(255,0,0,0.65) 100%);
}

    Ein Präfix erforderlich wäre, und der browser-support wäre wahrscheinlich IE9+ (non-filter Gradienten)

    • Hi @Paulie_D, ich bin ein bisschen interessiert an Ihrem eigenen Ansatz auf einen besseren Weg für die HTML-Struktur. Ich habe auch die gleiche situation wie kareen. Können Sie Ihre eigenen Beispiel?
    InformationsquelleAutor Paulie_D
  2. 0

    Könnte man etwas wie das hier tun:

    <div class="block">
    <div class="content">
        <h3>Some Title Goes Here</h3>
        <div>Author: Bill Jones</div>
    </div>
</div>

    CSS:

    .block {
    position: relative;
    width: 300px;
    height: 200px;
    border: 1px #DDD solid;
    background: url(http://lorempixel.com/300/200/nature/5) no-repeat 0 0;
}
.block .content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, .7);
    color: #EEE;
    padding: 10px;
}

    Demo: http://jsfiddle.net/kwPP8/

    • hi dfsq, was ist, wenn die Struktur der html-Code wird wie diese (siehe mein jsfiddle) jsfiddle.net/Kareen/kwPP8/2 ich will nicht das das Bild sein Spiel als hintergrund.
    InformationsquelleAutor dfsq
Schreibe einen Kommentar