css中如何使用background-attachment屬性

發(fā)布時間：2020-09-24 12:57:09 來源：億速云閱讀：113 作者：小新欄目：web開發(fā)

小編給大家分享一下css中如何使用background-attachment屬性，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

css background-attachment屬性需要和background-image屬性一起使用，用來設(shè)置背景圖像是否固定或者隨著頁面的其余部分滾動?？稍O(shè)置：scroll（背景圖相對元素固定），fixed（背景圖相對于視口固定）、ocal（背景圖相對于元素內(nèi)容固定）。

css background-attachment屬性怎么用？

background-attachment屬性需要和background-image屬性一起使用，用來設(shè)置背景圖像是否固定或者隨著頁面的其余部分滾動?？稍O(shè)置：scroll（背景圖相對元素固定），fixed（背景圖相對于視口固定）、ocal（背景圖相對于元素內(nèi)容固定）。

作用：background-attachment 屬性設(shè)置背景圖像是否固定或者隨著頁面的其余部分滾動。

說明：

● scroll 默認值。背景圖像會隨著頁面其余部分的滾動而移動。

● fixed 當頁面的其余部分滾動時，背景圖像不會移動。

● loca 背景圖像相對于元素的內(nèi)容固定。當元素的內(nèi)容滾動時，背景圖像總是要跟著內(nèi)容一起移動

● inherit 規(guī)定應(yīng)該從父元素繼承 background-attachment 屬性的設(shè)置。

注釋：所有瀏覽器都支持 background-attachment 屬性。

css background-attachment屬性使用示例

<html>
<head>
<style type="text/css">
body 
{
background-image:url('https://img.php.cn/upload/article/000/005/656/5af270fd37755429.jpg');
background-repeat:no-repeat;
background-attachment:fixed
}
</style>
</head>
<body>
<p>圖像不會隨頁面的其余部分滾動。</p>
<p>圖像不會隨頁面的其余部分滾動。</p>
<p>圖像不會隨頁面的其余部分滾動。</p>
<p>圖像不會隨頁面的其余部分滾動。</p>
<p>圖像不會隨頁面的其余部分滾動。</p>
<p>圖像不會隨頁面的其余部分滾動。</p>
<p>圖像不會隨頁面的其余部分滾動。</p>
<p>圖像不會隨頁面的其余部分滾動。</p>
<p>圖像不會隨頁面的其余部分滾動。</p>
<p>圖像不會隨頁面的其余部分滾動。</p>
<p>圖像不會隨頁面的其余部分滾動。</p>
<p>圖像不會隨頁面的其余部分滾動。</p>
<p>圖像不會隨頁面的其余部分滾動。</p>
<p>圖像不會隨頁面的其余部分滾動。</p>
<p>圖像不會隨頁面的其余部分滾動。</p>
<p>圖像不會隨頁面的其余部分滾動。</p>
<p>圖像不會隨頁面的其余部分滾動。</p>
<p>圖像不會隨頁面的其余部分滾動。</p>
<p>圖像不會隨頁面的其余部分滾動。</p>
<p>圖像不會隨頁面的其余部分滾動。</p>
<p>圖像不會隨頁面的其余部分滾動。</p>
<p>圖像不會隨頁面的其余部分滾動。</p>
<p>圖像不會隨頁面的其余部分滾動。</p>
<p>圖像不會隨頁面的其余部分滾動。</p>
</body>
</html>

以上是css中如何使用background-attachment屬性的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問一下細節(jié)

css中如何使用background-attachment屬性

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標簽