CSS背景和CSS列表

------------------------------

           div{
            background: red;
            width: 300px;
            height: 300px;
            border: 20px dashed; ///这里不设置颜色,默认颜色为背景色。即:background-color:transparent;(全透明黑色的速记法)。
           }

        <div>背景包括边框和内边距,不包括外边距</div>

--------------

当设置边框,和内边距时,父容器的div本身宽高在变大,而内容本身的宽高不变,切记!!!。

=====================================

background- image的默认值是none。

如果同时设置背景图片和背景颜色,那么背景图片会覆盖掉背景颜色。

background-color:red;

background-image:url();  //会覆盖前者。如果背景色写为:background:red;那么就是遵循(最近原则)

===============================

background-repeat可能的属性值有repeatno-repeatrepeat-xrepeat-yinherit(继承)

fixed是相对于浏览器窗口进行设定的。

background:url(img/logo.png) no-repeat fixed center;   //左右上下垂直居中,在浏览器的正中央。不论浏览器怎么缩放。

background:url(img/logo.png) no-repeat fixed right;    //在浏览器右边,且垂直居中。不论浏览器怎么缩放。

background:url(img/logo.png) no-repeat fixed left;    //在浏览器左边,且垂直居中。不论浏览器怎么缩放。

background:url(img/logo.png) no-repeat fixed bottom;    //在浏览器底部,且左右居中。不论浏览器怎么缩放。

background:url(img/logo.png) no-repeat fixed top;    //在浏览器顶部,且左右居中。不论浏览器怎么缩放。

Internet Explorer6-11版本都不支持属性值 "inherit"。

---------------

background-position属性值可以是百分比、关键字、单位是像素 (0px 0px) 或任何其他的 CSS 单位。

background-position:40em 30em;

所有浏览器都支持 background-position 属性。

-----------

猜你喜欢

转载自www.cnblogs.com/Knowledge-is-infinite/p/10650783.html