About the use of the background-attachment attribute of css-CSS Tutorial-php.cn

About the use of the background-attachment attribute of css

不言

Release： 2018-06-21 17:48:39

Original

2167 people have browsed it

This article mainly introduces to you how to use the background attachment attribute background-attachment in CSS to set whether the background image scrolls with the object or remains fixed. Friends in need can refer to it

1. Background-attachment attribute

In CSS, you can use the background-attachment attribute background-attachment to set whether the background image scrolls with the object or remains fixed.
Syntax:

background-attachment:scroll/fixed;

Copy after login

Description:

The background-attachment attribute has only 2 attribute values. scroll means that the background image scrolls as the object scrolls, which is the default option; fixed means that the background image is fixed on the page, and only other content scrolls with the scroll bar.

Example:

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        #p1
        {
            width:160px;
            height:1200px;
            border:1px solid gray;
            background-image:url("cartoongirl.gif");
            background-repeat:no-repeat;
            background-attachment:fixed;
        }
    </style>
</head>
<body>
    <p id="p1"></p>
</body>
</html>

Copy after login

The preview effect in the browser is as follows:

Analysis:

When you drag the scroll bar on the right in the browser, you will find that the background image is fixed on the page.

After setting background-attachment in IE or 360, you cannot set the background-position attribute, otherwise the image will not be displayed in the browser. You can test Google browser and Firefox browser.

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

Simulate the effect of box-shadow in css3 under IE

About using a background image in css Implementation ideas for making navigation menu

The above is the detailed content of About the use of the background-attachment attribute of css. For more information, please follow other related articles on the PHP Chinese website!