배경 이미지에 CSS 필터를 적용하는 방법
P粉722409996
2023-08-21 11:18:28
<p>검색 페이지의 배경 이미지로 사용하고 있는 JPEG 파일이 있고 Backbone.js 컨텍스트에서 작업하고 있기 때문에 CSS를 사용하여 설정하고 있습니다. </p>
<pre class="brush:php;toolbar:false;">배경 이미지: url("whatever.jpg");</pre>
<p>CSS 3 흐림 필터를 배경에만 적용하고 싶지만 해당 요소에만 스타일을 지정하는 방법을 모르겠습니다. 시도하면: </p>
<pre class="brush:php;toolbar:false;">-webkit-filter: Blur(5px);
-moz-filter: 흐림(5px);
-o-filter: 흐림(5px);
-ms-필터: 흐림(5px);
필터: 흐림(5px);</pre>
<p>내 CSS의 <code>배경 이미지</code> 바로 아래에는 배경뿐만 아니라 전체 페이지의 스타일이 지정됩니다. 이미지만 선택하고 필터를 적용하는 방법이 있나요? 또는 페이지의 다른 요소에 대한 흐림 효과를 끄는 방법이 있습니까? </p>
pen
消除了额外元素的需要,并使内容适应文档流,而不像其他解决方案那样固定/绝对。
使用以下方式实现:
编辑 如果您希望删除边缘的白色边框,请使用
110%
的宽度和高度以及-5%
的左边和顶部。这将稍微放大您的背景 - 但边缘不应有实心颜色渗入。感谢Chad Fawcett的建议。查看这个pen。
你需要使用两个不同的容器,一个用于背景图片,另一个用于内容。
在示例中,我创建了两个容器,
.background-image
和.content
。它们都使用
position: fixed
和left: 0; right: 0;
进行定位。它们显示的差异来自于为元素设置的不同z-index
值。