কীভাবে আমি একটি ওভারলেতে সিএসএস গ্লাস / অস্পষ্ট প্রভাব কাজ করতে পারি?

Question

আধা-স্বচ্ছ ওভারলে ডিভের উপর ঝাপসা প্রভাব প্রয়োগ করতে আমার সমস্যা হচ্ছে। আমি ডিভের পিছনে থাকা সমস্ত কিছুই ঝাপসা করে রাখতে চাই:

এখানে একটি jsfiddle যা কাজ করে না: http://jsfiddle.net/u2y2091z/

এই ধারণাটি কীভাবে তৈরি করবেন? আমি এটিকে যতটা সম্ভব জটিলভাবে রাখতে চাই এবং এটি ক্রস ব্রাউজারে রাখতে চাই। আমি যে সিএসএস ব্যবহার করছি তা এখানে:

#overlay {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;

    background:black;
    background:rgba(0,0,0,0.8);

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

Comments

এফওয়াইআই - CSS filterফায়ারফক্সে সমর্থিত নয়, আপনার এটি ব্যবহার করা উচিত নয়।

— ওয়েফস.পি

সম্ভবত ডিভিটি অস্বচ্ছ তৈরি করুন তবে চিত্রটির সাথে সিউডো উপাদানটি ব্যবহার করুন কারণ এটি ব্যাকগ্রাউন্ড যা স্বাধীনভাবে ঝাপসা হতে পারে।

— bjb568

@ chipChocolate.py সিএসএস ফিল্টারগুলি এফএফ 35 + এ ডিফল্টরূপে সমর্থিত। তবে আমি আপনার সাথে একমত, বিকাশকারী হিসাবে আমাদের এটির উপর নির্ভর করা উচিত নয় কারণ এটি কোনও ক্রস ব্রাউজারের বৈশিষ্ট্য নয়।

— হাশেম কোলামি

সিএসএস ফিল্টারগুলি এখন বেশিরভাগ প্রধান ব্রাউজারগুলিতে সমর্থিত।

— এরিক রিড

Answer 1

আরও সাধারণ এবং আপ টু ডেট উত্তরের জন্য:

backdrop-filter: blur(6px);

নোট ব্রাউজার সমর্থন নিখুঁত নয় তবে বেশিরভাগ ক্ষেত্রেই অস্পষ্টতা অপরিহার্য হবে।

Comments

এটি এখন পর্যন্ত সেরা উত্তর।

— ট্যানার বার্টন

Answer 2

এখানে একটি উদাহরণ যা svgফিল্টার ব্যবহার করে ।

ধারণা একটি ব্যবহার করা svgসঙ্গে উপাদান heightহিসাবে একই #overlayএবং প্রয়োগ feGaussianblurএটিতে ফিল্টার। এই ফিল্টার একটি svg imageউপাদান প্রয়োগ করা হয় । এটিকে একটি বাহ্যিক প্রভাব দিতে, আপনি box-shadowওভারলে এর নীচে একটি ব্যবহার করতে পারেন ।

svgফিল্টারগুলির জন্য ব্রাউজার সমর্থন ।

Demo on Codepen

body {
  background: #222222;
}
#container {
  position: relative;
  width: 450px;
  margin: 0 auto;
}
img {
  height: 300px;
}
#overlay {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 1;
  color: rgba(130, 130, 130, 0.5);
  font-size: 50px;
  text-align: center;
  line-height: 100px;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3);
}

<div id="container">
  <img src="http://lorempixel.com/450/300/sports" />
  <div id="overlay">WET</div>
  <svg width="450" height="100" viewBox="0 0 450 100" style="position: absolute; top: 0;">
    <defs>
      <filter id="blur">
        <feGaussianBlur in="SourceGraphic" stdDeviation="3" />
      </filter>
    </defs>
    <image filter="url(#blur)" xlink:href="http://lorempixel.com/450/300/sports" x="0" y="0" height="300px" width="450px" />
  </svg>
</div>

Answer 3

আমি এখানে এবং গুগলিংয়ের প্রত্যেকের কাছ থেকে তথ্য একসাথে করতে সক্ষম হয়েছি এবং আমি নিম্নলিখিতগুলি নিয়ে এসেছি যা ক্রোম এবং ফায়ারফক্সে কাজ করে: http://jsfiddle.net/xtbmpcsu/ । আমি এখনও আইই এবং অপেরার জন্য এই কাজটি করার জন্য কাজ করছি।

কীটি ডিভের ভিতরে যে ফিল্টারটি প্রয়োগ করা হয়েছে তাতে সামগ্রীর ভিতরে রাখছে:

<div id="mask">
    <p>Lorem ipsum ...</p>
    <img src="http://www.byui.edu/images/agriculture-life-sciences/flower.jpg" />
</div>

এবং তারপরে সিএসএস:

body {
    background: #300000;
    background: linear-gradient(45deg, #300000, #000000, #300000, #000000);
    color: white;
}
#mask {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: black;
    opacity: 0.5;
}
img {
    filter: blur(10px);
    -webkit-filter: blur(10px);
    -moz-filter: blur(10px);
    -o-filter: blur(10px);
    -ms-filter: blur(10px);
    position: absolute;
    left: 100px;
    top: 100px;
    height: 300px;
    width: auto;
}

সুতরাং মুখোশ ফিল্টার প্রয়োগ করা হয়েছে। এছাড়াও, <svg>মানটির জন্য একটি ট্যাগ সহ ফিল্টারের জন্য url () এর ব্যবহারটি নোট করুন - এই ধারণাটি http://codepen.io/AmeliaBR/pen/xGuBr থেকে এসেছে । আপনি যদি নিজের সিএসএসকে ছোট করে দেখান, আপনার এসভিজি ফিল্টার মার্কআপের কোনও স্থান "% 20" দিয়ে প্রতিস্থাপন করতে হতে পারে।

সুতরাং এখন, মুখোশ ডিভের ভিতরে সমস্ত কিছু ঝাপসা হয়ে গেছে।

Comments

এটি খুব চালাক

— জামালউদ্দিন রুমী

ক্রোম ফাইনাল পছন্দ করে না filter: url(...। সরান যে এবং Chrome সফলভাবে ব্যবহার filter: blur(10px);।

— ডগ এস

আমি কি ভুল বুঝেছি? ওপি যা চায় তা নয়। লেখাগুলি অস্পষ্ট করা উচিত নয়।

— এরিক

@Eric, আপনি পরিষ্কারভাবে ভুল বুঝা, যেহেতু ANSWERER হয় ওপি।

— তাও

Answer 4

আপনি যদি আজ একটি নির্ভরযোগ্য ক্রস ব্রাউজার পদ্ধতির সন্ধান করেন তবে আপনি কোনও দুর্দান্ত খুঁজে পাবেন না। আপনার কাছে সর্বোত্তম বিকল্পটি হ'ল দুটি চিত্র তৈরি করা (এটি কিছু পরিবেশে স্বয়ংক্রিয়ভাবে তৈরি করা যেতে পারে), এবং সেগুলি এমনভাবে সাজানো যাতে একটির অপরটি ওভারলেল করে। আমি নীচে একটি সাধারণ উদাহরণ তৈরি করেছি:

<figure class="js">
    <img src="http://i.imgur.com/3oenmve.png" />
    <img src="http://i.imgur.com/3oenmve.png?1" class="blur" />
</figure>

figure.js {
    position: relative;
    width: 250px; height: 250px;
}

figure.js .blur {
    top: 0; left: 0;
    position: absolute;
    clip: rect( 0, 250px, 125px, 0 );
}

কার্যকর হলেও, এমনকি এই পদ্ধতির প্রয়োজন আদর্শ নয়। বলা হচ্ছে, এটি পছন্দসই ফলাফল দেয় ।

Answer 5

এখানে একটি সম্ভাব্য সমাধান।

এইচটিএমএল

<img id="source" src="http://www.byui.edu/images/agriculture-life-sciences/flower.jpg" />

<div id="crop">
    <img id="overlay" src="http://www.byui.edu/images/agriculture-life-sciences/flower.jpg" />
</div>

সিএসএস

#crop {
    overflow: hidden;

    position: absolute;
    left: 100px;
    top: 100px;

    width: 450px;
    height: 150px;
}

#overlay {
    -webkit-filter:blur(4px);
    filter:blur(4px);

    width: 450px;
}

#source {
    height: 300px;
    width: auto;
    position: absolute;
    left: 100px;
    top: 100px;
}

আমি জানি সিএসএস সহজতর করা যেতে পারে এবং আপনার সম্ভবত আইডিস থেকে মুক্তি পাওয়া উচিত। এখানে ধারণাটি হ'ল ক্রপিং ধারক হিসাবে একটি ডিভি ব্যবহার করুন এবং তারপরে চিত্রটির সদৃশটিতে ঝাপসা প্রয়োগ করুন। ফিডল

ফায়ারফক্সে এই কাজটি করতে আপনাকে এসভিজি হ্যাক ব্যবহার করতে হবে ।

Comments

@ chipChocolate.py আমি তারপর আপনি যে ক্ষেত্রে করা SVG হ্যাক ব্যবহার করার প্রয়োজন demosthenes.info/blog/534/Crossbrowser-Image-Blur ।

— জুহো ভেস্পসালিনেন

নোট করুন যে সিএসএস ফিল্টারের জন্য, আপনি -webkit-সেই ব্রাউজারগুলিতে প্রয়োগ না করা বাদে অন্য বিক্রেতার উপসর্গগুলি বাদ দিতে পারেন । সমস্ত প্রিফিক্সড সংস্করণ পরে - প্রমিত ঘোষণাটি শেষে দেওয়া আরও ভাল।

— হাশেম কোলামি

@ হাশেমকোলামি সম্পন্ন হয়েছে ধন্যবাদ

— জুহো ভেস্পসালিনেন

এফএফ ঠিক আছে, এখন (54.0.1 (32-বিট))। একদম সঠিক! টিএক্স!

— পেড্রো

Answer 6

background: rgba(255,255,255,0.5);
backdrop-filter: blur(5px);

আপনার সামগ্রীতে অন্য অস্পষ্ট প্রেক্ষাপট যুক্ত করার পরিবর্তে আপনি ব্যাকড্রপ-ফিল্টার ব্যবহার করতে পারেন । এফওয়াইআই আইই ১১ এবং ফায়ারফক্স এটি সমর্থন নাও করতে পারে। ক্যানিয়াস পরীক্ষা করুন ।

ডেমো:

header {
  position: fixed;
  width: 100%;
  padding: 10px;
  background: rgba(255,255,255,0.5);
  backdrop-filter: blur(5px);
}
body {
  margin: 0;
}

<header>
  Header
</header>
<div>
  <img src="https://dummyimage.com/600x400/000/fff" />
  <img src="https://dummyimage.com/600x400/000/fff" />
  <img src="https://dummyimage.com/600x400/000/fff" />
</div>

Comments

একই সমাধান ইতিমধ্যে প্রস্তাব করা হয়েছে: stackoverflow.com/a/58083568/3702797

— Kaiido

কোনও ইনলাইন এসভিজির জন্য অনুরূপ কিছু অর্জন করার উপায় আছে !?

— 71GA

@ 71GA এই পরীক্ষা sitepoint.com/...

— অ্যালেন ওং

Answer 7

#bg, #search-bg {
  background-image: url('https://images.pexels.com/photos/719609/pexels-photo-719609.jpeg?w=940&h=650&auto=compress&cs=tinysrgb');
  background-repeat: no-repeat;
  background-size: 1080px auto;
}

#bg {
  background-position: center top;
  padding: 70px 90px 120px 90px;
}

#search-container {
  position: relative;
}

#search-bg {
  /* Absolutely position it, but stretch it to all four corners, then put it just behind #search's z-index */
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  z-index: 99;

  /* Pull the background 70px higher to the same place as #bg's */
  background-position: center -70px;

  -webkit-filter: blur(10px);
  filter: url('/media/blur.svg#blur');
  filter: blur(10px);
}

#search {
  /* Put this on top of the blurred layer */
  position: relative;
  z-index: 100;
  padding: 20px;
  background: rgb(34,34,34); /* for IE */
  background: rgba(34,34,34,0.75);
}

@media (max-width: 600px ) {
  #bg { padding: 10px; }
  #search-bg { background-position: center -10px; }
}

#search h2, #search h5, #search h5 a { text-align: center; color: #fefefe; font-weight: normal; }
#search h2 { margin-bottom: 50px }
#search h5 { margin-top: 70px }

<div id="bg">
  <div id="search-container">
    <div id="search-bg"></div>
    <div id="search">
      <h2>Awesome</h2>
      <h5><a href="#">How it works »</a></h5>
    </div>
  </div>
</div>

Answer 8

আমি এই সমাধান নিয়ে এসেছি।

অস্পষ্ট প্রভাবের চিত্র দেখতে ক্লিক করুন

এটি এমন এক কৌশল যা একেবারে অবস্থানযুক্ত শিশুকে ব্যবহার করে div, এর পটভূমির চিত্রটি পিতামাতার মতোই সেট করে divএবং তারপরে background-attachment:fixedসিএসএস সম্পত্তি ব্যবহার backgroundকরে পিতামাতার উপাদানগুলিতে একই বৈশিষ্ট্যগুলি সেট করা হয়।

তারপরে আপনি filter:blur(10px)শিশু ডিভিতে (বা কোনও মান) প্রয়োগ করুন।

*{
    margin:0;
    padding:0;
    box-sizing: border-box;
}
.background{
    position: relative;
    width:100%;
    height:100vh;
    background-image:url('https://images.unsplash.com/photo-1547937414-009abc449011?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80');
    background-size:cover;
    background-position: center;
    background-repeat:no-repeat;
}

.blur{
    position: absolute;
    top:0;
    left:0;
    width:50%;
    height:100%;
    background-image:url('https://images.unsplash.com/photo-1547937414-009abc449011?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80');
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size:cover;
    filter:blur(10px);
    transition:filter .5s ease;
    backface-visibility: hidden;
}

.background:hover .blur{
    filter:blur(0);
}
.text{
    display: inline-block;
    font-family: sans-serif;
    color:white;
    font-weight: 600;
    text-align: center;
    position: relative;
    left:25%;
    top:50%;
    transform:translate(-50%,-50%);
}

<head>
    <title>Blurry Effect</title>
</head>
<body>
    <div class="background">
        <div class="blur"></div>
        <h1 class="text">This is the <br>blurry side</h1>
    </div>
</body>
</html>

কোডেপনে দেখুন

Answer 9

এটি সামগ্রীতে অস্পষ্ট ওভারলে করবে:

.blur {
  display: block;
  bottom: 0;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  -webkit-backdrop-filter: blur(15px);
  backdrop-filter: blur(15px);
  background-color: rgba(0, 0, 0, 0.5);
}

Answer 10

এখানে একটি সমাধান রয়েছে যা স্থির পটভূমির সাথে কাজ করে, আপনার যদি একটি স্থির পটভূমি থাকে এবং আপনার কিছু ওভারলেড উপাদান থাকে এবং আপনার সেগুলির জন্য ঝাপসা ব্যাকগ্রাউন্ডের প্রয়োজন হয়, এই সমাধানটি কাজ করে:

চিত্রটি আমাদের এই সাধারণ এইচটিএমএল:

<body> <!-- or any wrapper -->
   <div class="content">Some Texts</div>
</body>

<body>বা মোড়কের উপাদানটির জন্য একটি স্থির পটভূমি :

body {
  background-image: url(http://placeimg.com/640/360/any);
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

এবং এখানে উদাহরণস্বরূপ আমাদের একটি সাদা স্বচ্ছ পটভূমি সহ একটি ওভারলেড উপাদান রয়েছে:

.content {
  background-color: rgba(255, 255, 255, 0.3);
  position: relative;
}

এখন আমাদের ওভারলে উপাদানগুলির জন্য আমাদের র‍্যাপারের ঠিক একই পটভূমি চিত্রটি ব্যবহার করা দরকার, আমি এটিকে একটি :beforeগ্রেড ক্লাস হিসাবে ব্যবহার করি :

.content:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  filter: blur(5px);
  background-image: url(http://placeimg.com/640/360/any);
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

যেহেতু স্থির পটভূমিটি মোড়ক এবং ওভারলেড উভয় উপাদানগুলিতে একইভাবে কাজ করে, তাই আমাদের ওভারলেড উপাদানগুলির ঠিক একই স্ক্রোল অবস্থানে পটভূমি রয়েছে এবং আমরা কেবল এটিকে অস্পষ্ট করতে পারি। ফায়ারফক্স, ক্রোম, অপেরা এবং প্রান্তে পরীক্ষিত এখানে একটি কার্যকারী ফিজল রয়েছে: https://jsfiddle.net/0vL2rc4d/

দ্রষ্টব্য: ফায়ারফক্সে একটি ত্রুটি রয়েছে যা স্ক্রোল করার সময় পর্দা ঝাঁকুনিতে ফেলেছে এবং সেখানে স্থির ঝাপটায় ব্যাকগ্রাউন্ড রয়েছে। যদি কোন ঠিক আছে, আমাকে জানাবেন