首页 > 代码库 > 背景以及一些背景属性

背景以及一些背景属性

2024-11-06 16:40:39   203人阅读

背景以及背景属性
<style>
       #imgcontainer{
           border:20px dotted  yellow;

           padding: 50px;
           height: 400px;
           background-color: red;
           /*背景颜色*/
           background-image: url("../../img/moxing.jpg");
           /*背景图片，图片会重复出现占满背景*/
           background-repeat: no-repeat;
           /*背景填充   repeat-x    repeat-y    no-repeat*/
           background-size:20%;
           /*图片大小
           cover：图片等比例缩放，直到最小部分填满容器
                  有可能会出现图片显示不全的效果
           contain（包含）：图片也是等比例缩放，直到最大部分填满容器
                  有可能会出现图片覆盖不完整*/
           /*background-position: 20px    20px;*/
           /*当只指定x或y中的一个方向时，另一个方向默认是居中效果（center，right，left：水平
           top,middle,bottom:垂直方向）*/
            background-origin:border-box;
           /*背景图片开始的位置
                border-box：从外边框处开始显示
                padding-box:从内边距处开始显示
                content-box：从内容处开始*/
           background-clip: content-box;
           /*背景图片的剪切开始位置
                border-box：从外边框处开始显示
                padding-box:从内边距处开始显示
                content-box：从内容处开始*/
           /*后面三个基本不用*/


       }
    </style>
    <title>背景</title>
</head>
<body>

<div    id="imgcontainer">
    印度国家安全顾问阿吉特?多瓦尔27日至28日将访中国，参加金砖峰会之前的五国国家
    安全顾问会议。由于多瓦尔据信是此次印军越过边界与解放军对峙的主要谋划者之一，
    印度媒体对他此行将与北京就解决边界危机进行谈判并取得成果抱有厚望。
</div>

</body>
结果图：
技术分享

背景以及一些背景属性


联系
我们