क्या मैं केवल एक 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 पर भी काम करेगा।

एचटीएमएल

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

सीएसएस

.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 पर परीक्षण मामला

: पहले और :: छद्म तत्व से पहले

एक अन्य चाल सीएसएस 2.1 :beforeया सीएसएस 3 ::beforeछद्म तत्वों का उपयोग करना है। :beforeछद्म तत्व IE में संस्करण 8 से समर्थित है, जबकि ::beforeछद्म तत्व का समर्थन नहीं किया गया है। यह उम्मीद है कि संस्करण 10 में सुधार किया जाएगा।

एचटीएमएल

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

सीएसएस

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

सीएसएस

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;
}

एचटीएमएल

<div> put your div content</div>

Question 5

यह हाय वहाँ पाठ के लिए विभिन्न div वर्ग का उपयोग करके किया जा सकता है ...

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

अब आप शैलियों को लागू कर सकते हैं

टैग। अन्यथा बीजी वर्ग के लिए। मुझे यकीन है कि यह ठीक काम करता है

Question 6

मैंने माक्र्स एकवाल के समाधान को लागू किया लेकिन इसे सरल बनाने के लिए कुछ चीजों को हटाने में सक्षम था और यह अभी भी काम करता है। शायद html / css का 2017 संस्करण?

एचटीएमएल:

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

सीएसएस:

#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 सेटों में यह rgba बना देगा, cmyk नहीं, लेकिन दोनों तरह से काम करेगा (rgba = 00000088, cmyk = 0%, 0%, 0%, 50%)

Question 9

मेरे लिए कोई भी समाधान काम नहीं आया। यदि सब कुछ विफल हो जाता है, तो फ़ोटोशॉप पर चित्र प्राप्त करें और कुछ प्रभाव लागू करें। इस पर 5 मिनट बनाम इतना समय ...