網站導航

zblogPHP模板zbpkf
zblog免費模板zblogfree
zblog模板學習zblogxuexi
zblogPHP仿站zbpfang

如何將CSS濾鏡應用于背景圖像

我有一個JPEG文件，我將它用作搜索頁面的背景圖像，我使用CSS來設置它，因為我在Backbone.js上下文中工作:

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

我想應用一個CSS 3模糊過濾器只對背景，但我不知道如何風格只是這一個元素。如果我嘗試:

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

就在我的CSS中的背景圖片下面，它設計了整個頁面的樣式，而不僅僅是背景。有沒有一種方法可以只選擇圖像并應用濾鏡？或者，有沒有辦法只關閉頁面上其他元素的模糊？

看看這支筆。

你將不得不使用兩個不同的容器，一個用于背景圖片，另一個用于你的內容。

在示例中，我創建了兩個容器。背景-圖像和內容。

兩者都是用position: fixed和left: 0放置；右:0；。顯示它們的不同之處在于為元素設置了不同的z索引值。

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

筆

不再需要額外的元素，同時使內容適合文檔流，而不是像其他解決方案那樣固定/絕對。

使用實現

.content {
  /* this is needed or the background will be offset by a few pixels at the top */
  overflow: auto;
  position: relative;
}

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

  display: block;
  background-image: url('https://i.imgur.com/lL6tQfy.png');
  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);
}

<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

如其他回答中所述，這可以通過以下方式實現:

模糊圖像的副本作為背景。一個偽元素，可以被過濾，然后放置在內容的后面。你也可以使用背景濾鏡有一個受支持的屬性叫做background-filter，它目前是 Chrome、Firefox、Edge、Safari和iOS Safari均支持(統計數據見caniuse.com)。

來自Mozilla devdocs:

background-filter屬性提供的效果包括使元素后面的區域模糊或變色，然后通過調整元素的透明度/不透明度可以透過該元素看到這些效果。

查看caniuse.com的使用統計。

你會像這樣使用它。如果你不想讓里面的內容變得模糊，使用工具類。u-非模糊

.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%;
  top: 0;
}

.background-filter {
  position: relative;
}

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

/* Use for content that should not be blurred */
.u-non-blurred {
  position: relative;
  z-index: 1;
}

<div class="background background-filter"></div>
<div class="background background-filter">
  <h1 class="u-non-blurred">Kermit D. Frog</h1>
</div>

為了做到這一點，你需要重新構建你的HTML。為了模糊背景，你必須模糊整個元素。所以如果你只想模糊背景，它必須是它自己的元素。

下面是一個用純CSS實現的現代瀏覽器的簡單解決方案，帶有一個“before”偽元素，類似于Matthew Wilcoxson的解決方案。

為了避免需要訪問偽元素來更改JavaScript中的圖像和其他屬性，只需使用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 */
}

請檢查以下代碼:-

.backgroundImageCVR{
    position:relative;
    padding:15px;
}
.background-image{
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    background:url('https://i.imgur.com/5SZI6qZ.jpeg');
    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>

在。CSS中的content選項卡將其更改為position:absolute。否則，呈現的頁面將不可滾動。

該規范引入了一個新的filter()函數，您可以對如下背景圖像使用該函數:

background: filter(url("whatever.jpg"), blur(5px));

& ltfilter()& gt；函數有兩個參數。第一個參數是一個& ltimage & gt。第二個是為CSS過濾器屬性指定的過濾器函數列表。該函數接受參數并應用過濾規則，返回處理圖像。

但是沒有瀏覽器支持這個:https://caniuse.com/css-filter-function.你現在只能在Safari上測試。

雖然提到的所有解決方案都非常聰明，但是當我嘗試它們時，它們似乎都有一些小問題，或者對頁面上的其他元素有潛在的影響。

最后，為了節省時間，我簡單地回到了我的老解決方案:我使用Paint.NET和效果，高斯模糊半徑為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;
}

編輯:

我終于讓它工作了，但是解決方案并不簡單！看這里:

濾鏡:模糊(1px)；不& # 39；不能在火狐、IE和opera上工作您實際需要的只是“過濾器”:

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>

當然，這不是一個CSS解決方案，但是您可以使用CDN質子與過濾器:

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

它來自https://developer.wordpress.com/docs/photon/api/#filter

現在，通過使用CSS網格，這變得更加簡單和靈活。你只需要將模糊的背景(imgbg)和文字(h2)重疊

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

和css:

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

CSS網格對我來說更容易理解。:)

html, body {
  width: 100%;
  height: 100%;
}

.container {
  width: 100%;
  height: 100%;
  
  display: grid;
  grid-template-columns: 1fr 6fr 1fr;
  grid-template-rows: 1fr 6fr 1fr;
  grid-template-areas: 
  '. . .'
  '. content .'
  '. . .'; 
  justify-content: center;
  align-items: center;
}

.backbround {
  width: 100%;
  height: 100%;
  
  grid-area: 1/1/5/5;
  
  background-image: url(https://i.imgur.com/aUhpEz3.jpg);
  filter: blur(5px);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.content {
  height: 200px;
  position: relative;
  
  grid-area: content;
  display: flex;
  
  justify-content: center;
  align-items: center;
  color: white;
}

<div class="container">
  <div class="backbround"></div>
  <div class="content"><h1>Hello World</h1></div>
</div>

這個答案是一個動態高度和圖像的材料設計水平卡布局。

為了防止圖像因卡片的動態高度而失真，您可以使用帶有模糊的背景占位符圖像來調整高度的變化。

說明該卡包含在& ltdiv & gt使用類包裝器，這是一個flexbox。該卡由兩個元素組成，一個圖像也是一個鏈接和內容。鏈接& lta & gt類鏈接被定位相對的。鏈接由兩個子元素組成，一個占位符& ltdiv & gt類模糊和一個& ltimg & gt圖片類，這是清晰的圖像。兩者都是絕對定位的，寬度為100%，但是pic類的堆棧順序更高，即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('https://i.imgur.com/5SZI6qZ.jpeg') 50% 50% / cover;"></div>
    <img src="https://i.imgur.com/5SZI6qZ.jpeg" 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 SASS編譯器的polyfill用于部分支持的background-fill，所以如果您有一個編譯管道，它可以很好地實現(它也使用TypeScript):

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

不使用來自

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>

您可以在想要應用濾鏡的圖像上創建一個div，并對其CSS類使用background-filter。看看這個鏈接

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

成功應用背景圖像的步驟

確保你已經使用鏈接標簽正確地鏈接了你的html和css & ltlink rel = & quot樣式表& quotref = & quotyourcssdocument.css & quot& gt

我不知道相對目錄和子目錄，所以我不能評論它

對我來說最有效的方法是在css中使用URL鏈接

#yourcssdoc .image {
   background-image: url("paste your link here with the quotations")
}

如果希望內容可滾動，請將內容的位置設置為絕對位置:

content {
   position: absolute;
   ...
}

我不知道這是不是只適合我，如果不是，這就是解決辦法！

此外，由于背景是固定的，這意味著你有一個“視差”效果！所以現在，這個人不僅教了你如何制作一個模糊的背景，而且還是一個視差背景效果！

上一篇django json http請求

下一篇嘗試將兩張水平的卡片對齊，使兩張圖片的底部對齊

欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

網站導航

網站導航

網站分類

如何將CSS濾鏡應用于背景圖像

欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

網站導航

網站導航

網站分類

如何將CSS濾鏡應用于背景圖像

相關文章