如何在HTML和CSS样式中拉伸背景图像？
[英]How to stretch background-image in html and css styling?
问题描述
我是html和css的新手，正在尝试创建一个个人网站以供学习。
我遇到背景图像无法拉伸以适合屏幕的问题。 在下面提供代码。
body{
background-image: url(backgroundimage.jpg);
/*background-color: #95afc0;*/
background-size: cover;
}
当窗口全屏显示时，图像工作正常。 我想看看是否有什么办法可以防止它复制图像以适合屏幕，而只是裁剪或拉伸以适合屏幕。 因为这将是移动设备上的问题。 我尝试了background-size的其他属性。
先感谢您！
6 个解决方案
解决方案1
1 2018-09-10 07:51:33
CSS对象适合属性
尝试以下方法，看看最适合您的需求...
.fill {object-fit: fill;}
.contain {object-fit: contain;}
.cover {object-fit: cover;}
.scale-down {object-fit: scale-down;}
.none {object-fit: none;}
CSS object-fit属性的所有值object-fit属性可以具有以下值：
- fill-这是默认设置。 替换内容的大小可填充元素的内容框。 如有必要，将拉伸或挤压物体以适合物体
- 包含-替换后的内容按比例缩放以保持其纵横比，同时适合元素的内容框
- 封面-替换内容的大小确定为在填充元素的整个内容框时保持其长宽比。 该对象将被裁剪以适合
- 无-替换后的内容不会调整大小
- 缩小-内容的大小就像未指定内容或包含内容一样（将导致较小的具体对象大小）
H2 { font-size:200%; color:#6a78c2; text-align:center; font-family: fantasy; } .myimgs { border:1px solid #333; background:#ff0653; padding:10px; margin-bottom:20px; } .myimg { width:100%; background-position:center; background-repeat: no-repeat; } .fill {object-fit: fill;} .cover {object-fit: cover;} .contain {object-fit: contain;} .scale-down {object-fit: scale-down;} .none {object-fit: none;}
<H2>FILL</H2> <div class="myimgs"> <img src="https://i.imgur.com/67jSBl0.jpg" alt="you" class="myimg fill" width="1049px" height="693px"> </div> <H2>COVER</H2> <div class="myimgs"> <img src="https://i.imgur.com/67jSBl0.jpg" alt="you" class="myimg cover" width="1049px" height="693px"> </div> <H2>CONTAIN</H2> <div class="myimgs"> <img src="https://i.imgur.com/67jSBl0.jpg" alt="you" class="myimg contain" width="1049px" height="693px"> </div> <H2>SCALE-DOWN</H2> <div class="myimgs"> <img src="https://i.imgur.com/67jSBl0.jpg" alt="you" class="myimg scale-down" width="1049px" height="693px"> </div> <H2>NONE</H2> <div class="myimgs"> <img src="https://i.imgur.com/67jSBl0.jpg" alt="you" class="myimg none" width="1049px" height="693px"> </div>
解决方案2
0 2018-09-10 07:45:11
尽量不要将背景放在您的<body> ，而是使用#background {position: fixed; z-index: 1; background-image: url(backgroundimage.jpg); background-repeat: no-repeat; height: 100vh; width: 100vw;}创建一个<div id="background"></div> #background {position: fixed; z-index: 1; background-image: url(backgroundimage.jpg); background-repeat: no-repeat; height: 100vh; width: 100vw;} #background {position: fixed; z-index: 1; background-image: url(backgroundimage.jpg); background-repeat: no-repeat; height: 100vh; width: 100vw;} （不要忘记在第一个内容层上应用z-index> 1来使背景成为背景）。
解决方案3
0 2018-09-10 07:51:43
background-position: center;
background-size: contain;
background-repeat: no-repeat;
您需要将图像背景位置添加到中心并将重复设置为无重复。
解决方案4
0 2018-09-10 07:53:19
您可以尝试此代码
body{
background-image: url(backgroundimage.jpg);
/*background-color: #95afc0;*/
background-repeat:no-repeat;
background-size: cover;
}
封面：调整背景图像的大小以覆盖整个容器，即使它必须拉伸图像或从边缘之一上切掉一点点
解决方案5
0 2018-09-10 09:01:41
为防止背景图像重复，您需要添加以下css属性和值：
background-repeat: no-repeat;
有关背景属性的更多信息，请访问此链接： https : //css-tricks.com/almanac/properties/b/background/
解决方案6
-1 2018-09-10 07:49:19
您需要添加background-position：center（指向X和Y轴）； 背景重复：不重复；
[HTML] [CSS]如何更改背景图片的不透明度，但不更改其上的文字？
[英][HTML][CSS] How to change opacity of background-image but not the text on it?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.