কোনও পটভূমির চিত্রটিতে কীভাবে সিএসএস ফিল্টার প্রয়োগ করতে হয়

Question

আমার কাছে একটি জেপিজি ফাইল রয়েছে যা আমি অনুসন্ধান পৃষ্ঠার জন্য একটি পটভূমি চিত্র হিসাবে ব্যবহার করছি এবং এটি সেট করতে আমি সিএসএস ব্যবহার করছি কারণ আমি ব্যাকবোন.জেস প্রসঙ্গে কাজ করছি :

background-image: url("whatever.jpg");

আমি কেবল পটভূমিতে একটি সিএসএস 3 অস্পষ্ট ফিল্টার প্রয়োগ করতে চাই , তবে ঠিক কীভাবে একটি উপাদানকে স্টাইল করা যায় তা আমি নিশ্চিত নই। যদি আমি চেষ্টা করি:

-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);

background-imageআমার সিএসএসের নীচে , এটি কেবল ব্যাকগ্রাউন্ডের চেয়ে পুরো পৃষ্ঠাটিকে স্টাইল করে। কেবল চিত্রটি নির্বাচন করার এবং ফিল্টারটি প্রয়োগ করার কোনও উপায় আছে কি? বিকল্পভাবে, পৃষ্ঠার প্রতিটি অন্যান্য উপাদানগুলির জন্য ঝাপসা বন্ধ করার কোনও উপায় আছে?

Comments

কোনও চিত্রের কেবলমাত্র একটি অংশ অস্পষ্ট করুন: কোডেপেন.ইও

— pen

Answer 1

এই কলম দেখুন ।

আপনাকে দুটি পৃথক পাত্রে ব্যবহার করতে হবে, একটি ব্যাকগ্রাউন্ড চিত্রের জন্য এবং অন্যটি আপনার সামগ্রীর জন্য।

উদাহরণস্বরূপ, আমি দুটি পাত্রে তৈরি করেছি, .background-imageএবং.content ।

তাদের উভয়ই রাখা হয় position: fixedএবং সাথে left: 0; right: 0;। এগুলি প্রদর্শনের পার্থক্যটি z-indexমানগুলির দ্বারা আসে যা উপাদানগুলির জন্য পৃথকভাবে সেট করা হয়েছিল।

.background-image {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 1;
  display: block;
  background-image: url('https://i.imgur.com/lL6tQfy.png');
  width: 1200px;
  height: 800px;
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
}

.content {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 9999;
  margin-left: 20px;
  margin-right: 20px;
}

<div class="background-image"></div>
<div class="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis aliquam erat in ante malesuada, facilisis semper nulla semper. Phasellus sapien neque, faucibus in malesuada quis, lacinia et libero. Sed sed turpis tellus. Etiam ac aliquam tortor, eleifend
    rhoncus metus. Ut turpis massa, sollicitudin sit amet molestie a, posuere sit amet nisl. Mauris tincidunt cursus posuere. Nam commodo libero quis lacus sodales, nec feugiat ante posuere. Donec pulvinar auctor commodo. Donec egestas diam ut mi adipiscing,
    quis lacinia mauris condimentum. Quisque quis odio venenatis, venenatis nisi a, vehicula ipsum. Etiam at nisl eu felis vulputate porta.</p>
  <p>Fusce ut placerat eros. Aliquam consequat in augue sed convallis. Donec orci urna, tincidunt vel dui at, elementum semper dolor. Donec tincidunt risus sed magna dictum, quis luctus metus volutpat. Donec accumsan et nunc vulputate accumsan. Vestibulum
    tempor, erat in mattis fringilla, elit urna ornare nunc, vel pretium elit sem quis orci. Vivamus condimentum dictum tempor. Nam at est ante. Sed lobortis et lorem in sagittis. In suscipit in est et vehicula.</p>
</div>

Lorem Ipsum পাঠ্যের জন্য ক্ষমা চাইছি ।

হালনাগাদ

Http://codepen.io/akademy/pen/FlkzB ব্যবহার করে আরও ভাল প্রয়োগের জন্য ম্যাথিউ উইলকক্সসনকে ধন্যবাদ.content:before

Comments

এটি করার একটি সামান্য ভাল উপায় হ'ল। কনটেন্ট ব্যবহার করুন: অতিরিক্ত "ব্যাকগ্রাউন্ড-চিত্র" মার্কআপের পরিবর্তে। আমি এখানে কলম আপডেট করেছি: codepen.io/akademy/pen/FlkzB

— ম্যাথু উইলকক্সসন

তবুও, কেবল ওয়েবকিটই এই বৈশিষ্ট্যটি প্রয়োগ করেছে এবং সেখানে কেবল বিক্রেতার উপসর্গ রয়েছে, তাই এমএস-, ও-, মোজ-উপসর্গগুলি অকেজো।

— জন z

এটি ফায়ারফক্স 35.0 এবং পরে ডিফল্টরূপে সমর্থিত: caniuse.com/#feat=css-filters

— মিক্কো রেন্টালাইনেন

JUst এফএফ 35 এ আপডেট হয়েছে এবং এটি উপসর্গ ছাড়াই কাজ করছে

— আমির মাহমুদ

@ অ্যাডওয়ার্ড ব্ল্যাক আমি মনে করি না যে এটির সমস্যা কিন্তু স্থায়ী অস্পষ্টতা থাকতে আপনাকে চিত্র সম্পাদনা সরঞ্জামগুলি অবলম্বন করতে হবে। অন্য উপায়টি হ'ল ফ্যান্টমজেএস / হেডলেস ওয়েবকিট ব্রাউজার ব্যবহার করে কিছু ধরণের চিত্র ক্যাপচার করা এবং তারপরে এটি পরিবেশন করা তবে এটি একই ফলাফল অর্জনের জন্য এক ক্লান্তিকর উপায়।

— অনিকেত

Answer 2

কলম

অন্যান্য সমাধানের মতো স্থির / নিখুঁত হওয়ার পরিবর্তে ডকুমেন্ট প্রবাহের মধ্যে সামগ্রীটিকে ফিট করার পাশাপাশি অতিরিক্ত উপাদানের প্রয়োজনীয়তা বিলোপ করা।

ব্যবহার করে অর্জন করেছেন

.content {
  overflow: auto;
  position: relative;
}

ওভারফ্লো অটো প্রয়োজন, অন্যথায় পটভূমি শীর্ষে কয়েকটি পিক্সেল দ্বারা অফসেট করা হবে।

এর পরে আপনার কেবল দরকার

.content:before {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  z-index: -1;

  display: block;
  background-image: url('img-here');
  background-size:cover;
  width: 100%;
  height: 100%;

  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
}

সম্পাদনা করুন আপনি যদি প্রান্তগুলিতে সাদা সীমানা সরাতে আগ্রহী হন তবে প্রস্থ এবং উচ্চতা 110%এবং একটি বাম এবং উপরে ব্যবহার করুন -5%। এটি আপনার ব্যাকগ্রাউন্ডগুলি একটি বাচ্চাকে বাড়িয়ে তুলবে - তবে প্রান্তগুলি থেকে কোনও শক্ত বর্ণের রক্তপাত হওয়া উচিত নয়।

আপডেট পেন এখানে: https://codepen.io/anon/pen/QgyewB - পরামর্শের জন্য চাদ ফাওসেট ধন্যবাদ।

Comments

এর সীমাবদ্ধতা হ'ল আপনি জেএসে সিউডো উপাদানগুলি হেরফের করতে পারবেন না। আপনার যদি প্রয়োজন না হয় তবে এটি একটি ভাল সমাধান।

— পোষ্ট ল্যাবগুলি

আপনি ঝাপসা সাদা সীমান্ত মত না থাকে তাহলে আপনি বৃদ্ধি করতে পারেন widthএবং heightকরতে 110%এবং তারপর যোগ একজন অফসেট -5%করতে topএবং leftএর content:beforeবর্গ।

— চাদ ফাওসেট

এটি আমার পক্ষে কাজ করছে, তবে আমি চাই যে ব্যবহারকারী যখন পৃষ্ঠাটি স্ক্রোল করে তখন সেই পটভূমি চিত্রটিও স্ক্রল হয়। ফিক্সড পজিশন এটি থামিয়ে দিচ্ছে। কীভাবে এই সমস্যা থেকে মুক্তি পাবেন?

— দিপান কুমার

Answer 3

অন্যান্য উত্তরে বর্ণিত হিসাবে এটি এর সাথে অর্জন করা যেতে পারে:

• পটভূমি হিসাবে অস্পষ্ট চিত্রের একটি অনুলিপি।
• ছদ্ম উপাদান যা ফিল্টার করা যায় তারপরে সামগ্রীর পিছনে রাখা যায়।

আপনি ব্যবহার করতে পারেন backdrop-filter

এখানে একটি সমর্থিত সম্পত্তি রয়েছে backdrop-filter, এবং এটি বর্তমানে ক্রোম 76, এজ , সাফারি এবং আইওএস সাফারিতে সমর্থিত ( পরিসংখ্যানের জন্য ক্যানিউজ ডট কম দেখুন )।

মজিলা ডিডোকস থেকে :

ব্যাকড্রপ-ফিল্টার বৈশিষ্ট্যটি কোনও উপাদানটির পিছনে অঞ্চলটি অস্পষ্ট করা বা রঙ পরিবর্তন করার মতো প্রভাবগুলির জন্য সরবরাহ করে, যা তখন উপাদানটির স্বচ্ছতা / অস্বচ্ছতা সামঞ্জস্য করে সেই উপাদানটির মাধ্যমে দেখা যায়।

Caniuse.com দেখুনব্যবহারের পরিসংখ্যানের জন্য ।

আপনি এটির মতো ব্যবহার করবেন:

.background-filter::after {
  -webkit-backdrop-filter: blur(5px); /* Use for Safari 9+, Edge 17+ (not a mistake) and iOS Safari 9.2+ */
  backdrop-filter: blur(5px); /* Supported in Chrome 76 */

  content: "";
  display: block;
  position: absolute;
  width: 100%; height: 100%;
}

.background-filter {
  position: relative;
}

.background {
  background-image: url('https://upload.wikimedia.org/wikipedia/en/6/62/Kermit_the_Frog.jpg');
  width: 200px;
  height: 200px;
}

<div class="background background-filter"></div>

আপডেট (12/06/2019) : ক্রোমিয়ামটি backdrop-filterversion 76 সংস্করণে ডিফল্টরূপে সক্ষম সহ প্রেরণ করবে যা ৩০/০/201/২০১ । এর শেষ।

আপডেট (01/06/2019) : মোজিলা ফায়ারফক্স দল ঘোষণা করেছে যে শিগগিরই এটি বাস্তবায়নে কাজ শুরু করবে।

আপডেট (21/05/2019) : "পরীক্ষামূলক ওয়েব প্ল্যাটফর্ম বৈশিষ্ট্যগুলি সক্ষম করুন" পতাকা সক্ষম না করে ক্রোমিয়াম সবেমাত্র ঘোষিত ক্রোমিয়াম backdrop-filterউপলব্ধ। এর অর্থ backdrop-filterসমস্ত ক্রোম প্ল্যাটফর্মগুলিতে প্রয়োগ করা খুব কাছাকাছি।

Comments

এমনকি যদি এটি সমস্ত ব্রাউজারে কাজ না করে তবে আপনি এটি করতে নির্দিষ্ট-সঠিক নন-হ্যাক উপায় সরবরাহ করার জন্য আমার ভোট পান get

— মিঃমিসিস 10

আফাইক এটি একটি মানহীন বৈশিষ্ট্য, সুতরাং এটির জন্য কোনও অনুমান নেই।

— ভিটিম.ইস

মাথা! 2018 এর জন্য ব্রাউজার সমর্থন উল্লেখযোগ্যভাবে হ্রাস পেয়েছে! এজ, ফায়ারফক্স বা ক্রোমে সমর্থিত নয়।

— প্রোটো ইভানজিলিয়ন

@ ছবি ইভাঞ্জেলিয়ন মনে হচ্ছে এটি 16+ প্রান্তে উপলব্ধ হবে এবং আমি অন্য কোনও ব্রাউজার দেখতে পাচ্ছি না যে তারা এটি বাস্তবায়ন করবে না। কোন দাবি এই দাবি ব্যাক আপ?

— হাইটাটোডস্ট্রাক্ট

@ হাইটাডোডস্ট্রাক্ট caniuse.com.com অনুযায়ী আইই, এজ 16, ফায়ারফক্স এবং ক্রোম এই মুহূর্তে ডিফল্টরূপে এটি সমর্থন করে না। আপনি ঠিক বলেছেন যে এজ 17+ এটিকে সমর্থন করে। যে ইশারা জন্য ধন্যবাদ। দুর্দান্ত উত্তর যদিও

— যাইহোক

Answer 4

এটি করার জন্য আপনাকে আপনার এইচটিএমএলটিকে পুনর্গঠন করতে হবে। পটভূমিটি অস্পষ্ট করতে আপনাকে পুরো উপাদানটি ঝাপসা করতে হবে। সুতরাং আপনি যদি কেবল পটভূমিটি অস্পষ্ট করতে চান তবে এটির নিজস্ব উপাদান হতে হবে।

Answer 5

দয়া করে নীচের কোডটি চেক করুন: -

.backgroundImageCVR{
	position:relative;
	padding:15px;
}
.background-image{
	position:absolute;
	left:0;
	right:0;
	top:0;
	bottom:0;
	background:url('http://www.planwallpaper.com/static/images/colorful-triangles-background_yB0qTG6.jpg');
	background-size:cover;
	z-index:1;
	-webkit-filter: blur(10px);
  -moz-filter: blur(10px);
  -o-filter: blur(10px);
  -ms-filter: blur(10px);
  filter: blur(10px);	
}
.content{
	position:relative;
	z-index:2;
	color:#fff;
}

<div class="backgroundImageCVR">
    <div class="background-image"></div>
    <div class="content">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis aliquam erat in ante malesuada, facilisis semper nulla semper. Phasellus sapien neque, faucibus in malesuada quis, lacinia et libero. Sed sed turpis tellus. Etiam ac aliquam tortor, eleifend rhoncus metus. Ut turpis massa, sollicitudin sit amet molestie a, posuere sit amet nisl. Mauris tincidunt cursus posuere. Nam commodo libero quis lacus sodales, nec feugiat ante posuere. Donec pulvinar auctor commodo. Donec egestas diam ut mi adipiscing, quis lacinia mauris condimentum. Quisque quis odio venenatis, venenatis nisi a, vehicula ipsum. Etiam at nisl eu felis vulputate porta.</p>
      <p>Fusce ut placerat eros. Aliquam consequat in augue sed convallis. Donec orci urna, tincidunt vel dui at, elementum semper dolor. Donec tincidunt risus sed magna dictum, quis luctus metus volutpat. Donec accumsan et nunc vulputate accumsan. Vestibulum tempor, erat in mattis fringilla, elit urna ornare nunc, vel pretium elit sem quis orci. Vivamus condimentum dictum tempor. Nam at est ante. Sed lobortis et lorem in sagittis. In suscipit in est et vehicula.</p>
    </div>
</div>

Answer 6

মথু উইলকক্সসনের সমাধানের মতো 'পূর্বে' সিউডো উপাদান সহ খাঁটি সিএসএসে আধুনিক ব্রাউজারগুলির জন্য নিম্নলিখিতটি সহজ সমাধান।

জাভাস্ক্রিপ্টে চিত্র এবং অন্যান্য বৈশিষ্ট্যগুলি পরিবর্তনের জন্য ছদ্ম উপাদানটি অ্যাক্সেস করার প্রয়োজনীয়তা এড়াতে কেবল inheritমূল্য হিসাবে ব্যবহার করুন এবং প্যারেন্ট উপাদানটির মাধ্যমে এটি অ্যাক্সেস করুন (এখানে body)।

body::before {
    content: ""; /* Important */
    z-index: -1; /* Important */
    position: inherit;
    left: inherit;
    top: inherit;
    width: inherit;
    height: inherit;
    background-image: inherit;
    background-size: cover;
    filter: blur(8px);
}

body {
  background-image: url("xyz.jpg");
  background-size: 0 0;  /* Image should not be drawn here */
  width: 100%;
  height: 100%;
  position: fixed; /* Or absolute for scrollable backgrounds */
}

Comments

এটি আমার পক্ষে কাজ করে না। আপনি কি একটি কাজ jsfiddle আছে?

— ম্যাট

Answer 7

ইন .contentএটি সিএসএস পরিবর্তন ট্যাব position:absolute। অন্যথায়, রেন্ডার করা পৃষ্ঠাটি স্ক্রোলযোগ্য হবে না।

Answer 8

যদিও উল্লিখিত সমস্ত সমাধানগুলি খুব চতুর, ততক্ষণে সবার মনে হয়েছে যে আমি যখন তাদের চেষ্টা করেছি তখন পাতায় অন্য উপাদানগুলির সাথে ছোটখাটো সমস্যা বা সম্ভাব্য কড়া প্রভাব রয়েছে।

সময় বাঁচানোর জন্য আমি কেবল আমার পুরানো সমাধানটিতে ফিরে গিয়েছিলাম: আমি পেইন্ট.এনইটি ব্যবহার করেছি এবং এফেক্টস, গাউসিয়ান ব্লারকে 5 থেকে 10 পিক্সেল ব্যাসার্ধ দিয়েছিলাম এবং কেবল এটি পৃষ্ঠা চিত্র হিসাবে সংরক্ষণ করেছি। :-)

এইচটিএমএল:

<body class="mainbody">
</body

সিএসএস:

body.mainbody
{
    background: url('../images/myphoto.blurred.png');
    -moz-background-size: cover;
    -webkit-background-size: cover;
    background-size: cover;
    background-position: top center !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed;
}

সম্পাদনা করুন:

অবশেষে আমি এটি কাজ করেছিলাম, তবে সমাধানটি কোনওভাবেই সোজা নয়! এখানে দেখো:

• ফিল্টার: ঝাপসা (1px); ফায়ারফক্স, আইই এবং অপেরাতে কাজ করে না

Comments

আপনি 2 টি আইএমজি ডাউনলোড করেছেন

— সিড

Answer 9

আপনার আসলে যা দরকার তা হ'ল "ফিল্টার":

blur(«WhatEverYouWantInPixels»);"

body {
    color: #fff;
    font-family: Helvetica, Arial, sans-serif;
}

#background {
    background-image: url('https://cdn2.geckoandfly.com/wp-content/uploads/2018/03/ios-11-3840x2160-4k-5k-beach-ocean-13655.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;

    /* START */
    /* START */
    /* START */
    /* START */

    /* You can adjust the blur-radius as you'd like */
    filter: blur(3px);
}

<div id="background"></div>

<p id="randomContent">Lorem Ipsum</p>

Answer 10

অবশ্যই এটি কোনও সিএসএস-সমাধান নয়, তবে আপনি সিডিএন প্রোটন এটি সহ ব্যবহার করতে পারেন filter:

body {
    background: url('https://i0.wp.com/IMAGEURL?w=600&filter=blurgaussian&smooth=1');
}

এটি https://developer.wordpress.com/docs/photon/api/#filter থেকে এসেছে

Comments

localhostপরীক্ষা করার সময় এই কাজটি করার জন্য কোনও স্মার্ট উপায় ?

— জোনাথন

বড় আকারের প্রতিচ্ছবিটির জন্য অস্পষ্ট পরিমাণটি খুব সূক্ষ্ম, আমি কীভাবে ব্লার্ক না দেখিয়ে ঝাপসা পরিমাণ বাড়িয়ে দেব? প্রস্থটি সামান্য সাহায্য করে, তবে আমি যদি খুব বেশি ঝাপসা করে দেখি তবে এটি খুব ব্লক দেখাচ্ছে

— জোনাথন

Answer 11

আমি এটি লিখিনি, তবে লক্ষ্য করেছি backdrop-filterযে সিএসএস এসএএসএস সংকলকটি ব্যবহার করে আংশিকভাবে সমর্থিত হওয়ার জন্য একটি পলিফিল ছিল , সুতরাং আপনার যদি সংকলন পাইপলাইন থাকে তবে এটি দুর্দান্তভাবে অর্জন করা যায় (এটি টাইপস্ক্রিপ্টও ব্যবহার করে):

https://codepen.io/mixal_bl4/pen/EwPMWo

Answer 12

div {
    background: inherit;
    width: 250px;
    height: 350px;
    position: absolute;
    overflow: hidden;  /* Adding overflow hidden */
}

div:before {
    content: ‘’;
    width: 300px;
    height: 400px;
    background: inherit;
    position: absolute;
    left: -25px;  /* Giving minus -25px left position */
    right: 0;
    top: -25px;   /* Giving minus -25px top position */
    bottom: 0;
    box-shadow: inset 0 0 0 200px rgba(255, 255, 255, 0.3);
    filter: blur(10px);
}

Answer 13

এই উত্তরটি গতিশীল উচ্চতা এবং একটি চিত্র সহ একটি মেটালিয়াল ডিজাইনের অনুভূমিক কার্ড বিন্যাসের জন্য।

কার্ডের গতিশীল উচ্চতার কারণে চিত্রটির বিকৃতি রোধ করতে, উচ্চতার পরিবর্তনের জন্য সামঞ্জস্য করতে আপনি অস্পষ্ট একটি পটভূমি প্লেসোল্ডার চিত্র ব্যবহার করতে পারেন।

 

ব্যাখ্যা

• কার্ডটি <div>ক্লাস র‌্যাপার সহ একটিতে রয়েছে যা একটি ফ্লেক্সবক্স।
• কার্ডটি দুটি উপাদান নিয়ে গঠিত, একটি চিত্র যা একটি লিঙ্ক এবং সামগ্রীও।
• লিঙ্কটি <a>, শ্রেণি লিঙ্কটি আপেক্ষিকভাবে অবস্থান করছে ।
• লিঙ্কটিতে দুটি উপ-উপাদান রয়েছে, একটি স্থানধারক <div>শ্রেণীর ঝাপসা এবং একটি <img>শ্রেণীর ছবি যা পরিষ্কার চিত্র।
• উভয়ই পরম স্থিতিশীল এবং রয়েছে width: 100%তবে ক্লাস পিকের উচ্চতর স্ট্যাক অর্ডার z-index: 2রয়েছে, যা এটি স্থানধারকের উপরে রাখে।
• অস্পষ্ট স্থানধারকটির জন্য পটভূমি চিত্রটি HTML এ ইনলাইন শৈলীর মাধ্যমে সেট করা আছে ।

 

কোড

.wrapper {
  display: flex;
  width: 100%;
  border: 1px solid rgba(0, 0, 0, 0.16);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.16), 0 1px 1px rgba(0, 0, 0, 0.23);
  background-color: #fff;
  margin: 1rem auto;
  height: auto;
}

.wrapper:hover {
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}

.link {
  display: block;
  width: 200px;
  height: auto;
  overflow: hidden;
  position: relative;
  border-right: 2px solid #ddd;
}

.blur {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 100%;
  height: 100%;
  filter: blur(5px);
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
}

.pic {
  width: calc(100% - 20px);
  max-width: 100%;
  height: auto;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
}

.pic:hover {
  transition: all 0.2s ease-out;
  transform: scale(1.1);
  text-decoration: none;
  border: none;
}

.content {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  padding: 20px;
  overflow-x: hidden;
}

.text {
  margin: 0;
}

<div class="wrapper">
  <a href="#" class="link">
    <div class="blur" style="background: url('http://www.planwallpaper.com/static/assets/img/header.jpg') 50% 50% / cover;"></div>
    <img src="http://www.planwallpaper.com/static/assets/img/header.jpg" alt="Title" class="pic" />
  </a>

  <div class="content">
    <p class="text">Agendum dicendo memores du gi ad. Perciperem occasionem ei ac im ac designabam. Ista rom sibi vul apud tam. Notaverim to extendere expendere concilium ab. Aliae cogor tales fas modus parum sap nullo. Voluntate ingressus infirmari ex mentemque ac manifeste
      eo. Ac gnum ei utor sive se. Nec curant contra seriem amisit res gaudet adsunt. </p>
  </div>
</div>

Answer 14

এখন এটি সিএসএস গ্রিড ব্যবহার করে আরও সহজ এবং আরও নমনীয় হয়ে উঠেছে You আপনাকে কেবল (এইচ 2) টেক্সটটির সাথে ঝাপসা ব্যাকগ্রাউন্ড (imgbg) কে ওভারল্যাপ করতে হবে

<div class="container">
 <div class="imgbg"></div>
 <h2>
  Lorem ipsum dolor sit amet consectetur, adipisicing elit. Facilis enim
  aut rerum mollitia quas voluptas delectus facere magni cum unde?:)
 </h2>
</div>

এবং সিএসএস:

.container {
        display: grid;
        width: 30em;
      }

.imgbg {
        background: url(bg3.jpg) no-repeat center;
        background-size: cover;
        grid-column: 1/-1;
        grid-row: 1/-1;
        filter: blur(4px);
      }


     .container h2 {
        text-transform: uppercase;
        grid-column: 1/-1;
        grid-row: 1/-1;
        z-index: 2;
      }

Answer 15

$fondo: url(/grid/assets/img/backimage.png);    
{ padding: 0; margin: 0; } 
body { 
    ::before{
        content:"" ; height: 1008px; width: 100%; display: flex; position: absolute; 
        background-image: $fondo ; background-repeat: no-repeat ; background-position: 
        center; background-size: cover; filter: blur(1.6rem);
    }
}

Comments

আপনার উত্তরে ব্যাখ্যা যুক্ত করা দুর্দান্ত হবে।

— অরবিন্দ মৌর্য

হিট স্যাস আমি পরের কোডটি রেখেছি এবং আমি সমস্ত আইটেম শরীরে আঁকিয়েছি, কেবল শরীরের পটভূমিতে একটি চিত্র রাখতে সহায়তা চাইতে পারেন ????? ond ফোন্ডো: ইউআরএল (/grid/assets/img/backimage.png); {প্যাডিং: 0; মার্জিন: 0; } বডি {:: এর আগে {সামগ্রী: ""; উচ্চতা: 1008px; প্রস্থ: 100%; প্রদর্শন: ফ্লেক্স; অবস্থান: পরম; পটভূমি-চিত্র: ond fondo; পটভূমি পুনরাবৃত্তি: কোন পুনরাবৃত্তি; পটভূমি অবস্থান: কেন্দ্র; পটভূমি-আকার: কভার; ফিল্টার: অস্পষ্টতা (1.6 মিম); }}

— কার্লোস বয়জো

Answer 16

সিউডো-বর্গ ব্যবহার না করেই থেকে

body{
    background:#cecece;
    font-family: "Scope One", serif;
    font-size: 12px;
    color:black;
    margin:0 auto;
    height:100%;
    width:100%;
    background-image: 
       linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.81)), 
        url(https://i.imgur.com/2rRMQh7.jpg);
       -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover; 
}

<body></body>

Answer 17

আপনি যদি সামগ্রীটি স্ক্রোলযোগ্য হতে চান তবে সামগ্রীর অবস্থানটিকে স্থির করে দিন:

content {
   position: absolute;
   ...
}

আমি জানি না এটি কেবল আমার জন্য ছিল কিনা, তবে তা ঠিক না হলে!

এছাড়াও যেহেতু ব্যাকগ্রাউন্ডটি স্থির হয়েছে, এর অর্থ আপনার "প্যারালাক্স" প্রভাব রয়েছে! সুতরাং এখন, এই ব্যক্তিটি কীভাবে ঝাপসা ব্যাকগ্রাউন্ড তৈরি করতে শেখায় তা নয়, এটি একটি প্যারাল্যাক্স ব্যাকগ্রাউন্ড ইফেক্টও!

Comments

প্রশ্নের উত্তর দেয় না

— জন্মগ্রহণ করুন