CSS: Ändern Undurchsichtigkeit des Hintergrundbildes innerhalb des Körpers Elementselektoreinrichtung

Ich habe ein Hintergrundbild im Inneren des Körpers mit CSS-Eigenschaft hinzugefügt, wie:CSS: Ändern Undurchsichtigkeit des Hintergrundbildes innerhalb des Körpers Elementselektoreinrichtung

body{ 
    background-image: url('background-img.jpg'); 
    }

Nun, was ich tun möchte, ist Undurchsichtigkeit Eigenschaft auf diesem Hintergrundbild hinzufügen . Können wir dies tun, ohne z-index -Eigenschaft zu verwenden (zB durch Trennung von Div mit Hintergrundbild und Inhalt)? Wenn es innerhalb eines Image-Tags wäre, hätte ich Opazitäts: Wert-Eigenschaft in CSS-Selektor verwendet, aber es ist nicht der Fall. Alle css Tricks oder Lösungen werden geschätzt!

Quelle

2016-11-09 Rabin Pantha

hilft können Sie Ihre HTML-Code – Abood

schreiben Sie meinen Code hier sehen können !! http://mumstudents.org/~985432/ –

div { 
 
    background: url(http://placehold.it/300x300); 
 
    background: linear-gradient(rgba(255,255,255,.5),rgba(255,255,255,.5)), url(http://placehold.it/300x300); 
 
    height: 300px; 
 
    width: 300px; 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
}

<div><div>

Quelle

2016-11-09 06:34:42 GvM

Sie können zusammen background Gradienten mit rgba() und url() Eigenschaft verwenden.

Genau wie:

background: linear-gradient(rgba(244, 67, 54, 0.95), 
          rgba(33, 150, 243, 0.75), 
          rgba(139, 195, 74, 0.75), 
          rgba(255, 87, 34, 0.95)), 
          url("http://placehold.it/200x200");

Blick auf das Snippet unten:

body { 
 
    width: 100%; 
 
    height: 100%; 
 
    background: linear-gradient(rgba(255, 255, 255, 0.6), 
 
       rgba(255, 255, 255, 0.6), 
 
       rgba(255, 255, 255, 0.6), 
 
       rgba(255, 255, 255, 0.6)), 
 
       url("http://lorempixel.com/400/200"); 
 
}

<body>This is some text</body>

hoffe, das hilft!

Quelle

2016-11-09 06:41:00

Versuchen Sie, diese Snippet

body{ 
 
    height:430px; 
 
    width:430px; 
 
} 
 
body::after { 
 
    content: ""; 
 
    background: url("https://www.google.com.pk/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"); 
 
    background-repeat:no-repeat; 
 
    opacity: 0.5; 
 
    top: 0; 
 
    left: 0; 
 
    bottom: 0; 
 
    right: 0; 
 
    position: absolute; 
 
    z-index: -1; 
 
}

<body> 
 
<h1>Hello world </h1> 
 
</body>

Hope this Sie DANK

Quelle

2016-11-09 07:00:34

CSS: Ändern Undurchsichtigkeit des Hintergrundbildes innerhalb des Körpers Elementselektoreinrichtung

Antwort

Verwandte Themen