background: url("bg.png") no-repeat; height:100%; width:100%; overflow: hidden; background-size:cover;//或者background-size:100%; 1. 2. 3. 4. 5. 方法三 body { background-image: url(images/bg.jpg); background-position: center center; background-repeat: no-repeat; /* 当内容高...
background-size的可能值为auto、contain和cover。 background-size: auto 使用auto,图像将保持其默认大小: 请记住,默认尺寸有时可能会导致图像模糊(如果太小) background-size: cover 在这里,图像将被调整大小以适合容器。如果纵横比不同,则图像将被遮盖以适应。
background-size: 100% auto:等比缩放, 沿 X轴铺满, 但高不会填充整个区域;可能会留有空白; backgroundSize cover :等比缩放, 显示不完整,超出部分会被裁剪; backgroundSize contain:等比缩放, 但不会填充整个区域;可能会留有空白; 背景图片未设置 background-size: 100% auto效果 background-size:100% 100%...
width: 140px; height: 140px; border: solid 1px #eee; background-size: contain; background-repeat: no-repeat; background-position: center; } <!--html部分--> 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 效果如下:无论尺寸怎么的图片动能很好的适应显示 用完就会发现,我喜欢...
排版与链接 Bootstrap 排版、链接样式设置了基本的全局样式。分别是: 为body 元素设置 background-color: #fff; 使用@font-family-base、@font-size-base 和@line-height-base 变量作为排版的基本参数 为所有链接设置了基本颜色 @link-color ,并且当链接处于 :hover 状态时才添加下划线 这些样式都能在 scaffoldin...
background-color: light-dark(white,black);color: light-dark(black,white);} 1. 2. 3. 4. 第一个值是浅色模式的样式。 第二个值是深色模式的样式。 再也不用重复代码,主题切换更加高效。 6. 表单验证新伪类::user-valid 和 :user-invalid ...
.video-container { width: 100%; aspect-ratio: 16 / 9; background: #000; } 使用clamp()实现响应式数值 clamp()函数允许根据视窗动态调整属性值,使其更为响应式,且不需要媒体查询。例如: .title { font-size: clamp(16px, 4vw, 32px); } ...
.aspect-ratio-box > iframe {position: absolute;width: 100%;height: 100%;} 24. 选择偶数和奇数元素 使用:nth-child 伪类设置替代元素的样式。 li:nth-child(even) {background-color: #f2f2f2;} li:nth-child(odd) {background-color: #e6e6e6...
{ width: 300px; /* border: 粗细 样式(solid 实线、dashed 虚线) 颜色 */ border: 1px solid red; /* 外边距可以居中元素 margin: 0 auto (水平居中) */ margin: 0 auto; } h2 { font-size: 16px; background-color: #3cbda6; line-height: 30px; } form { background: aquamarine; } div...
width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgb(0,0,0); /* Fallback color */ background-color: rgba(0,0,0,0.9); /* Black w/ opacity */ } /* Modal Content (image) */ .modal-content ...