让背景图适配视口很容易,需要使用下面 CSS 即可: body { background-image: url('https://images.unsplash.com/photo-1573480813647-552e9b7b5394?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2253&q=80'); background-repeat: no-repeat; background-position: center; background...
background-color的默认值是transparent(透明);background-image的默认值是none(无);background-repeat的默认值是repeat(重复);background-attachment的默认值是scroll(滚动);background-position的默认值是0 0(等价于top left,即左上角),只有需要覆盖其他样式的规则时才去特意指定这些默认值。 二、css3定义背景属性 ...
url('../static/images/circus.png');background-repeat:no-repeat;background-position:center;background-color:red;}.c-right-bottom{position:absolute;right:0;bottom:0;width:100px;height:70px;border:2pxsolidgreen;background-image:inherit;background-repeat:no-repeat;background-position:...
DOCTYPEhtml>background-image(背景图片)示例body{margin:24px;padding:24px;border:1pxsolid black; }div{width:420px;height:320px;background-color:#06b7e1;background-image:url(https://img-blog.csdnimg.cn/20210414230229207.png); } background-image(背景图片)示例效果图: background-size(背景图片尺寸...
实现背景图像宽度自适应的CSS代码示例: css .container { width: 100%; /* 容器宽度设置为100%,以适应父容器或视口宽度 */ height: 300px; /* 容器高度可以设置为固定值或百分比 */ background-image: url('your-image.jpg'); /* 背景图像路径 */ background-size: auto 100%; /* 背景图像宽度自适...
多背景图片 background-image 在CSS2.1 中,元素只能添加一张背景图片。然而在 CSS3 中,我们可以给元素添加多张背景图片。其兼容性如下图所示: 图片 多张背景图片可针对每一张设置单独的样式,对应样式用逗号分隔 代码语言:javascript 复制 .div1{width:100px;height:100px;background-color:black;background-image...
background-image:inherit;background-repeat:no-repeat;background-position:center;}.un-image-wrapper{width:100px;height:70px;}.wrapper1{background-color:#adad12;position:relative;border:2px solid black;}.wrapper2{position:absolute;width:200px;height:140px;/*background-color: inherit;*/border:2...
css body { margin: 0; padding: 0; } div { position: absolute; height: 100vh; width: 100vw; } .day { background-image: url("https://images.unsplash.com/photo-1477959858617-67f85cf4f1df?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2613&q=80"); ...
css 复制代码 div {width: 400px;height: 300px;background-image: url('image.jpg');background-size: contain;background-position: center;} 三、注意事项和技巧 避免背景图像的拉伸和失真:当使用background-size属性时,要特别注意不要将图像拉伸或压缩得过于严重,这可能会导致图像失真。
CSS部分 背景图片分辨率为427*640 #box{background-image:url(/media/examples/hand.jpg);width:100%;height:100%;} 分别给box的background-size属性添加不同的属性值,会产生不同的效果。 1、长度:可以用px、em、rem等指定背景图片大小,不能为负值。