আমি কি কেবল একটি ডিভের পটভূমির চিত্রের জন্য অস্পষ্টতা সেট করতে পারি?

Question 1

বলি আমার আছে

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

আমি লাগাতে চান background-imageএবং এটি একটি দিতে opacityএর 0.5- কিন্তু আমি চাই যে পাঠ্য আমি লিখেছি পূর্ণ অস্বচ্ছতা থাকবে ( 1)।

আমি যদি এইভাবে সিএসএস লিখতাম

.myDiv { opacity:0.5 }

সমস্ত কিছুই স্বচ্ছতার মধ্যে থাকবে - এবং আমি এটি চাই না।

সুতরাং আমার প্রশ্নটি হল - আমি কীভাবে সম্পূর্ণ অস্বচ্ছ পাঠ্যের সাথে স্বল্প-অস্বচ্ছ ব্যাকগ্রাউন্ড চিত্র পেতে পারি?

Question 2

না, এই কাজটি করা যায় না opacity এটির উপাদানগুলি সহ পুরো উপাদানকে প্রভাবিত করে এবং এই আচরণ পরিবর্তন করার কোনও উপায় নেই। নিম্নলিখিত দুটি পদ্ধতির সাহায্যে আপনি এটিকে ঘিরে কাজ করতে পারেন।

মাধ্যমিক ডিভ

divপটভূমি ধরে রাখতে ধারকটিতে অন্য একটি উপাদান যুক্ত করুন । এটি সর্বাধিক ক্রস-ব্রাউজারের বন্ধুত্বপূর্ণ পদ্ধতি এবং আই আই 6 তেও কাজ করবে।

এইচটিএমএল

<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সিউডো-এলিমেন্টটি ভার্সন 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পটভূমির চিত্রের জন্য নেতিবাচক সেট করতে হবে ।

পরীক্ষার মামলা

জেএসফিডেলে পরীক্ষার কেসটি দেখুন:

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 class="myDiv">
    <div class="bg">
   <p> Hi there</p>
</div>
</div>

এখন আপনি স্টাইলগুলি প্রয়োগ করতে পারেন

ট্যাগ অন্যথায় বিজি ক্লাসের জন্য। আমি নিশ্চিত যে এটি ঠিক আছে

Question 6

আমি মার্কাস একওয়ালের সমাধানটি কার্যকর করেছি তবে এটি সহজ করে তুলতে কয়েকটি জিনিস সরিয়ে ফেলতে সক্ষম হয়েছি এবং এটি এখনও কার্যকর রয়েছে। এইচটিএমএল / সিএসএসের 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 = 00000088, cmyk = 0%, 0%, 0%, 50%)

Question 9

সমাধানগুলির কোনওটিই আমার পক্ষে কাজ করেনি। অন্য সব কিছু যদি ব্যর্থ হয়, ফটোশপটিতে ছবিটি পান এবং কিছু প্রভাব প্রয়োগ করুন। 5 মিনিট বনাম এত সময় ...