Czy Mogę ustawić krycie tylko na obrazie tła div?
Powiedzmy, że mam
<div class="myDiv">Hi there</div>
Chcę umieścić background-image i dać opacity z {–4]} - ale chcę, aby tekst, który napisałem, miał pełną nieprzezroczystość (1).
Gdybym napisał CSS w ten sposób
.myDiv { opacity:0.5 }
Wszystko będzie w niskiej nieprzezroczystości – I nie chcę tego.
Więc moje pytanie brzmi – jak Mogę uzyskać obraz tła o niskiej nieprzezroczystości z pełnym tekstem nieprzezroczystości?
8 answers
Nie, Nie można tego zrobić, ponieważ opacity wpływa na cały element wraz z jego zawartością i nie ma możliwości zmiany tego zachowania. Możesz obejść to za pomocą dwóch następujących metod.
Secondary div
Dodaj kolejny div element do kontenera, aby utrzymać tło. Jest to najbardziej przyjazna dla wielu przeglądarek metoda i będzie działać nawet na IE6.
HTML
<div class="myDiv">
<div class="bg"></div>
Hi there
</div>
CSS
.myDiv {
position: relative;
z-index: 1;
}
.myDiv .bg {
position: absolute;
z-index: -1;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: url(test.jpg) center center;
opacity: .4;
width: 100%;
height: 100%;
}
Zobacz przypadek testowy na jsFiddle
:before and:: before pseudo-element
Kolejną sztuczką jest użycie pseudoelementów CSS 2.1 :before lub CSS 3 ::before. :before pseudoelement jest wspierany w IE od wersji 8, podczas gdy pseudoelement ::before nie jest w ogóle wspierany. Mam nadzieję, że zostanie to poprawione w wersji 10.
HTML
<div class="myDiv">
Hi there
</div>
CSS
.myDiv {
position: relative;
z-index: 1;
}
.myDiv:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: url(test.jpg) center center;
opacity: .4;
}
Uwagi DODATKOWE
Ze względu na zachowanie z-index będziesz musiał ustawić indeks z dla kontener oraz negatyw z-index dla obrazu tła.
Przypadki testowe
Zobacz przypadek testowy na jsFiddle:
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-01-26 14:41:56
Więc tutaj jest inny sposób:
background-image: linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0.5)), url("your_image.png");
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-04-20 11:05:55
Css
Div {
width: 200px;
height: 200px;
display: block;
position: relative;
}Div:: after {
content:"";
background: url(image.jpg);
nieprzezroczystość: 0.5;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}Html
umieść zawartość div
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-11-21 13:04:50
Można to zrobić używając innej klasy div dla tekstu Hi There...
<div class="myDiv">
<div class="bg">
<p> Hi there</p>
</div>
</div>
Teraz możesz zastosować style do
Tag. inaczej dla klasy bg. Jestem pewien, że działa dobrze
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-01-07 11:08:24
Zaimplementowałemrozwiązanie Marcusa Ekwalla , ale udało mi się usunąć kilka rzeczy, aby było prostsze i nadal działa. Może 2017 wersja html / css?
Html:
<div id="content">
<div id='bg'></div>
<h2>What is Lorem Ipsum?</h2>
<p><strong>Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen
book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
Css:
#content {
text-align: left;
width: 75%;
margin: auto;
position: relative;
}
#bg {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: url('https://static.pexels.com/photos/6644/sea-water-ocean-waves.jpg') center center;
opacity: .4;
width: 100%;
height: 100%;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 12:17:54
Witam wszystkich zrobiłem to i działało dobrze
var canvas, ctx;
function init() {
canvas = document.getElementById('color');
ctx = canvas.getContext('2d');
ctx.save();
ctx.fillStyle = '#bfbfbf'; // #00843D // 118846
ctx.fillRect(0, 0, 490, 490);
ctx.restore();
}section{
height: 400px;
background: url(https://images.pexels.com/photos/265087/pexels-photo-265087.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
position: relative;
}
canvas {
width: 100%;
height: 400px;
opacity: 0.9;
}
#text {
position: absolute;
top: 10%;
left: 0;
width: 100%;
text-align: center;
}
.middle{
text-align: center;
}
section small{
background-color: #262626;
padding: 12px;
color: whitesmoke;
letter-spacing: 1.5px;
}
section i{
color: white;
background-color: grey;
}
section h1{
opacity: 0.8;
}<html lang="en">
<head>
<meta charset="UTF-8">
<title>Metrics</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body onload="init();">
<section>
<canvas id="color"></canvas>
<div class="w3-container middle" id="text">
<i class="material-icons w3-highway-blue" style="font-size:60px;">assessment</i>
<h1>Medimos las acciones de tus ventas y disenamos en la WEB tu Marca.</h1>
<small>Metrics & WEB</small>
</div>
</section> Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-03-12 15:06:08
<!DOCTYPE html>
<html>
<head></head>
<body>
<div style=" background-color: #00000088"> Hi there </div>
<!-- #00 would be r, 00 would be g, 00 would be b, 88 would be a. -->
</body>
</html>
Włączenie 4 zestawów liczb sprawi, że będzie to rgba, a nie cmyk, ale tak czy inaczej zadziała (rgba= 00000088, cmyk= 0%, 0%, 0%, 50%)
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-03-29 21:18:48
Żadne z rozwiązań nie zadziałało. Jeśli Wszystko inne zawiedzie, Pobierz zdjęcie do Photoshopa i zastosuj jakiś efekt. 5 minut kontra tyle czasu...
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-10-14 00:27:43