مكان كيفية تطبيق مرشح CSS 3 blur على صورة خلفية




كود css جاهز (10)

كما ورد في إجابات أخرى ، يمكن تحقيق ذلك من خلال:

  • نسخة من الصورة غير الواضحة كخلفية.
  • مجموعة زائفة يمكن تصفيتها ثم وضعها خلف المحتوى.

يمكنك أيضًا استخدام backdrop-filter

هناك خاصية مدعومة تسمى backdrop-filter ، وهي مدعومة حاليًا في Edge و Safari و iOS Safari 9.2 والإصدارات الأحدث (انظر caniuse.com for stats).

من backdrop-filter :

توفر خاصية تصفية الصور الخلفية تأثيرات مثل تشويش أو تحويل اللون للمنطقة خلف عنصر ، والذي يمكن رؤيته من خلال ذلك العنصر عن طريق ضبط شفافية / تعتيم العنصر.

سوف تستخدمه كما هو الحال:

.box {
  backdrop-filter: blur(5px);
  /* background, width, height etc. */
}

للإحصائيات ، انظر caniuse.com

لدي ملف JPEG أستخدمه كصورة خلفية لصفحة بحث ، وأنا أستخدم CSS لتعيينه لأنني أعمل ضمن سياقات Backbone.js :

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

أريد تطبيق فلتر CSS 3 blur فقط على الخلفية ، لكنني لست متأكدًا من كيفية تصميم عنصر واحد فقط. إذا جربت:

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

فقط أسفل background-image في CSS الخاص بي ، فإنه يصمم الصفحة بأكملها ، وليس فقط الخلفية. هل هناك طريقة لتحديد الصورة فقط وتطبيق المرشح على ذلك؟ بدلاً من ذلك ، هل هناك طريقة لإيقاف تشغيل التمويه فقط لكل عنصر آخر في الصفحة؟


يرجى التحقق من الكود التالي:

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


تحقق من هذا pen .

سيكون عليك استخدام حاويتين مختلفتين ، واحدة لصورة الخلفية والأخرى للمحتوى الخاص بك.

في المثال ، قمت بإنشاء حاويتين ، .background-image و .content .

يتم وضع كل منهما مع position: fixed left: 0; right: 0; left: 0; right: 0; . يأتي الفرق في عرضهم من قيم z-index التي تم تعيينها بشكل مختلف للعناصر.

HTML

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

CSS

.background-image {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 1;

  display: block;
  background-image: url('http://666a658c624a3c03a6b2-25cda059d975d2f318c03e90bcf17c40.r92.cf1.rackcdn.com/unsplash_527bf56961712_1.JPG');
  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;
}

اعتذارات لوريم إيبسوم النص.

تحديث

بفضل ماثيو ويلكوكسن لتطبيق أفضل باستخدام .content:before http://codepen.io/akademy/pen/FlkzB


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


هذه الإجابة مخصصة لتصميم أفقي لتصميم المواد مع ارتفاع ديناميكي وصورة.

لمنع تشويه الصورة نظرًا للارتفاع الديناميكي للبطاقة ، يمكنك استخدام صورة موضع خلفية في الخلفية مع التعتيم لضبط التغييرات في الارتفاع.

تفسير

  • توجد البطاقة في <div> مع غلاف الفصل ، وهو صندوق مرن.
  • تتكون البطاقة من عنصرين ، صورة هي أيضًا رابط ومحتوى.
  • الرابط <a> ، رابط الفئة ، يتم وضعه نسبيًا .
  • يتكون الرابط من عنصرين فرعيين ، عنصر نائب <div> blur و <img> class pic وهو الصورة الواضحة.
  • يتم وضع كليهما مطلقًا ولهما 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>



مجرد السماح للشخصية بيب ، إذا لم يكن هذا بالفعل. إذا كنت تريد أن يكون المحتوى قابلاً للتمرير ، فاضبط موضع المحتوى على مطلق:

content { 
   position: absolute;
   ...
}

لا أعرف ما إذا كان هذا فقط بالنسبة لي ، ولكن إن لم يكن هذا هو الإصلاح!

أيضا منذ يتم إصلاح الخلفية ، فهذا يعني أن لديك تأثير "Parallax"! لذلك لا يعلم فقط هذا الشخص يعلمك كيفية جعل خلفية ضبابية ، ولكن أيضا تأثير الخلفية المنظر!


على الرغم من أن جميع الحلول المذكورة ذكية جدًا ، إلا أنه يبدو أن جميع المشكلات كانت طفيفة أو محتملة التأثير على العناصر الأخرى في الصفحة عندما جربتها.

في النهاية لتوفير الوقت ، عدت للتو إلى حلّي القديم: استخدمت Paint.NET وذهبت إلى Effects ، Gaussian Blur مع دائرة نصف قطرها من 5 إلى 10 بكسل وحفظها للتو كصورة للصفحة. :-)

HTML:

<body class="mainbody">
</body

CSS:

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

تصحيح:

وأخيراً حصلت على العمل ، ولكن الحل ليس بأي حال من الأحوال المباشرة! انظر هنا:


في علامة التبويب .content في CSS ، يمكنك تغييرها إلى position:absolute . بخلاف ذلك ، لن تكون الصفحة المقدمة قابلة للتمرير.


تحتاج إلى إعادة تنظيم HTML الخاص بك من أجل القيام بذلك. يجب عليك طمس العنصر بالكامل من أجل تعتيم الخلفية. لذلك إذا كنت تريد طمس الخلفية فقط ، يجب أن يكون العنصر الخاص بها.





css-filters