كيفية تطبيق مرشح كس على صورة الخلفية
https://stackoverflow.com//questions/20039765
-
21-12-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russianسؤال
لدي ملف جبيغ الذي أستخدمه كصورة خلفية لصفحة بحث ، وأنا أستخدم كس لتعيينه لأنني أعمل داخل العمود الفقري.شبيبة السياقات:
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 في بلدي كس ، فإنه أنماط الصفحة بأكملها ، بدلا من مجرد الخلفية.هل هناك طريقة لتحديد الصورة فقط وتطبيق الفلتر على ذلك?بدلا من ذلك, هل هناك طريقة لإيقاف التعتيم لكل عنصر آخر على الصفحة?
المحلول
تحقق من هذا القلم.
سيكون عليك استخدام حاويتين مختلفتين ، واحدة لصورة الخلفية والأخرى للمحتوى الخاص بك.
في المثال ، لقد خلقت حاويتين, .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('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;
}<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>الاعتذار عن أبجد هوز نص.
تحديث
شكرا ل ماثيو ويلكوكسون لتنفيذ أفضل باستخدام .content:before http://codepen.io/akademy/pen/FlkzB
نصائح أخرى
إلغاء الحاجة إلى عنصر إضافي ، إلى جانب جعل المحتوى مناسبا لتدفق المستند بدلا من أن يكون ثابتا/مطلقا مثل الحلول الأخرى.
يتحقق باستخدام
.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 - شكرا تشاد فوسيت على الاقتراح.
كما جاء في إجابات أخرى هذا يمكن أن يتحقق مع:
- نسخة من وضوح الصورة كخلفية.
- الزائفة العناصر التي يمكن تصفيتها ثم وضعه وراء المحتوى.
يمكنك أيضا استخدام backdrop-filter
هناك دعم خاصية تسمى backdrop-filter, و هو حاليا
معتمدة في كروم 76, الحافة, رحلات السفاري, دائرة الرقابة الداخلية سفاري (انظر caniuse.com الإحصاء).
من موزيلا devdocs:
خلفية تصفية الممتلكات يوفر تأثيرات مثل طمس أو تحول لون المنطقة خلف عنصر ، التي يمكن أن ينظر إليها من خلال هذا العنصر عن طريق ضبط عنصر الشفافية/التعتيم.
انظر 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-filter تمكين بشكل افتراضي في نسخة 76 يرجع أصل 30/07/2019.
تحديث (01/06/2019):على Mozzilla Firefox فريق أعلنت فإنه سيتم البدء في العمل على تنفيذ هذا قريبا.
تحديث (21/05/2019):الكروم أعلنت للتو backdrop-filter يتوفر في كروم كناري دون تمكين "تمكين التجريبية على شبكة الإنترنت منصة يتميز" العلم.وهذا يعني backdrop-filter هو قريب جدا من يجري تنفيذها على جميع منصات كروم.
تحتاج إلى إعادة هيكل HTML من أجل القيام بذلك.يجب عليك طمس العنصر بأكمله من أجل طمس الخلفية.لذلك إذا كنت ترغب في طمس الخلفية فقط، يجب أن تكون عنصرها الخاص.
يرجى التحقق من الرمز أدناه: -
ما يلي هو حل بسيط للمتصفحات الحديثة في كس نقية مع 'قبل' عنصر الزائفة ، مثل الحل من ماثيو ويلكوكسون.
لتجنب الحاجة إلى الوصول إلى العنصر الزائف لتغيير الصورة والسمات الأخرى في جافا سكريبت ، ما عليك سوى استخدام 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 */
}
في ال .content علامة التبويب في المغلق تغييره إلى position:absolute.خلاف ذلك ، لن تكون الصفحة المقدمة قابلة للتمرير.
على الرغم من أن جميع الحلول المذكورة ذكية للغاية، إلا أن جميعها بدا أن لديها مشاكل طفيفة أو طرق محدودة على الآثار مع عناصر أخرى على الصفحة عندما جربتها.
في النهاية لتوفير الوقت، عدت ببساطة إلى محلولتي القديمة: استخدمت paint.net وذهبت إلى الآثار، Gaussian Blur مع دائرة نصف قطرها 5 إلى 10 بكسل وحفظها فقط كصورة الصفحة.: -)
html:
giveacodicetagpre.css:
giveacodicetagpre.تحرير:
حصلت أخيرا على أنها تعمل، لكن الحل ليس بأسعار واضحة!انظر هنا:
- مرشح: Blur (1PX)؛لا يعمل في فايرفوكس، أي والأوبرا
كل ما تحتاجه فعلا هو "فلتر":
giveacodicetagpre.
بالطبع ، هذا ليس حل كس ، ولكن يمكنك استخدام بروتون كدن مع filter:
body {
background: url('https://i0.wp.com/IMAGEURL?w=600&filter=blurgaussian&smooth=1');
}
إنه من https://developer.wordpress.com/docs/photon/api/#filter
لم أكتب هذا، لكنني لاحظت أن هناك polyfly من أجل الأجيال المدعومة جزئيا باستخدام برنامج التحويل البرمجي SASS CSS، لذلك إذا كان لديك خط أنابيب تجميع، فيمكن تحقيقه بشكل جيد (يستخدم أيضا أنفسه):
href="https://codepen.io/mixal_bl4/pen/ewpmwo" er="nofollow noreferrer"> https://codepen.io/mixal_bl4/pen/apmwo
هذه الإجابة هي ل تصميم المواد تخطيط بطاقة أفقي مع ارتفاع ديناميكي وصورة.
لمنع تشويه الصورة بسبب الارتفاع الديناميكي للبطاقة ، يمكنك استخدام صورة عنصر نائب في الخلفية مع ضبابية لضبط التغييرات في الارتفاع.
الشرح
- يتم تضمين البطاقة في
<div>مع الطبقة المجمع, ، وهو صندوق مرن. - تتكون البطاقة من عنصرين ، صورة وهي أيضا الارتباط والمحتوى.
- الرابط
<a>, صف دراسي الرابط, ، يتم وضعه نسبي. - يتكون الرابط من عنصرين فرعيين ، عنصر نائب
<div>فئة طمس و<img>فئة الموافقة المسبقة عن علم وهي الصورة الواضحة. - يتم وضع كلاهما مطلق و لديك
width: 100%, ، ولكن الطبقة الموافقة المسبقة عن علم لديه ترتيب مكدس أعلى ، أي.,z-index: 2, ، مما يضعه فوق العنصر النائب. - يتم تعيين صورة الخلفية للعنصر النائب غير الواضح عبر نمط مضمنة في أتش تي أم أل.
كود
.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>الآن أصبح هذا أكثر بساطة وأكثر مرونة باستخدام CSS Grid.You فقط يجب أن تتداخل الخلفية المملوءة (IMGBG) مع النص (H2)
giveacodicetagpre.و css:
giveacodicetagpre.إذا كنت ترغب في الحصول على محتوى قابل للتمرير، فقم بتعيين موضع المحتوى إلى المطلق:
giveacodicetagpre.لا أعرف إذا كان هذا فقط بالنسبة لي، ولكن إذا لم يكن هذا هو الإصلاح!
أيضا منذ إصلاح الخلفية، فهذا يعني أن لديك تأثير "المنظر" !حتى الآن، ليس فقط هذا الشخص يعلمك كيفية صنع خلفية ضبابية، لكنه أيضا تأثير خلفية منظرا!
