样式中背景图片部分属性

来源：互联网发布：c语言水仙花数代码编辑：程序博客网时间：2024/06/02 07:28
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <style>        div{            height: 300px;            /*边框设置*/            border: 1px solid red;            background-color: blue;            /*背景图片引用，图片优先于背景颜色*/            background-image: url("../../img/1.png");            /*小图填充 no-repeat不填充 repeat-x水平方向填充 竖直方向填充repeat-y*/            background-repeat:no-repeat;            /*位置偏移 俩个值 水平偏移 竖直偏移              如果只定义一个值，会认为该值为水平方向，竖直方向会为居中              right bottom 右下角 right top右上 left bottom 左下              只输入center 上下左右都会居中显示*/            background-position:center;            /*背景图片大小 俩个值:分别用百分比表示            contain宽高进行等比例缩放：不会存在比例失真，知道宽或者高填满父布局，有可能存在填充不满的情况            cover 进行等比例缩放 ，直到较小的宽或者高填满父布局，可能出现图片溢出现象*/            background-size:cover;        }    </style>    <title>图片属性</title></head><body><div>    <!--背景属性         background（缩写形式）         background-color（背景色）         background-image（背景图）         background-repeat（背景图重复方式）         background-position（位置坐标、偏移量0）         background-clip         background-origin         background-size    --></div></body></html>
0 0