[html] div의 배경 이미지에만 불투명도를 설정할 수 있습니까?

Question 1

내가 가지고 있다고하자

<div class="myDiv">Hi there</div>

내가 데려 가고 싶다는 background-image과 그 줄 opacity의를 0.5-하지만 난 내가 쓴 텍스트 (완전 불투명있을 것이라는 점을합니다 1).

이렇게 CSS를 작성하면

.myDiv { opacity:0.5 }

모든 것이 낮은 불투명도로 될 것 입니다 – 그리고 저는 그것을 원하지 않습니다.

그래서 제 질문은 – 완전 불투명 텍스트로 저 불투명 배경 이미지를 어떻게 얻을 수 있습니까?

Question 2

아니요, opacity콘텐츠를 포함한 전체 요소에 영향을 미치고이 동작을 변경할 방법 이 없으므로이 작업을 수행 할 수 없습니다 . 다음 두 가지 방법으로이 문제를 해결할 수 있습니다.

보조 div

div배경을 유지하기 위해 컨테이너에 다른 요소를 추가 합니다. 이것은 브라우저간에 가장 친숙한 방법이며 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%;
}

jsFiddle에서 테스트 케이스 보기

: before 및 :: before 의사 요소

또 다른 트릭은 CSS 2.1 :before또는 CSS 3 ::before의사 요소를 사용하는 것입니다. :before가상 요소는 IE 버전 8부터 지원되지만 ::before의사 요소는 전혀 지원되지 않습니다. 이것은 버전 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;
}

추가 참고 사항

z-index당신 의 행동으로 인해 컨테이너에는 Z- 색인을 설정 z-index하고 배경 이미지 에는 음수 를 설정해야합니다.

테스트 케이스

jsFiddle의 테스트 사례를 참조하십시오.

Question 3

그래서 여기에 다른 방법이 있습니다.

background-image: linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0.5)), url("your_image.png");

Question 4

CSS

div {
    width: 200px;
    height: 200px;
    display: block;
    position: relative;
}

div::after {
    content: "";
    background: url(image.jpg);
    opacity: 0.5;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: -1;
}

HTML

<div> put your div content</div>

Question 5

이것은 Hi There … 텍스트에 대해 다른 div 클래스를 사용하여 수행 할 수 있습니다.

<div class="myDiv">
    <div class="bg">
   <p> Hi there</p>
</div>
</div>

이제 스타일을

꼬리표. 그렇지 않으면 bg 클래스의 경우. 나는 그것이 잘 작동한다고 확신한다

Question 6

나는 Marcus Ekwall의 솔루션을 구현 했지만 더 간단하게 만들기 위해 몇 가지를 제거 할 수 있었지만 여전히 작동합니다. 2017 년 버전의 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%;
}

https://jsfiddle.net/abalter/3te9fjL5/

Question 7

여러분 안녕하세요 제가이 일을했고 잘 작동했습니다

	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 &amp; WEB</small>
</div>
</section>

스 니펫 확장

Question 8

<!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>

4 세트의 숫자를 포함하면 cmyk가 아닌 rgba가되지만 어느 쪽이든 작동합니다 (rgba = 00000088, cmyk = 0 %, 0 %, 0 %, 50 %).