[英]How to make background-image all full-screen with html+css
I am working on a file html+css and I want to create background-image full-screen in HTML, and CSS I have set all properties for background image.我正在处理一个 html+css 文件,我想在 HTML 和 CSS 中创建全屏背景图像,我已经设置了背景图像的所有属性。 I want that background-image to fill all full-screen on devices and without scrolling on background-image so I try to do this:
我希望该背景图像在设备上全屏显示并且不在背景图像上滚动,所以我尝试这样做:
* { margin: 0; padding: 0; }.background-image { position: relative; } img { background-size: cover; background-position: center; background-repeat: no-repeat; background-attachment: fixed; position: fixed; height: 100%; width: 100%; } </style>
<div class="background-image"> </div>
I set the background-image position relative and img position fixed to make fixed without scrolling but it brings the background-image is streched also text?我设置背景图像 position 相对和 img position 固定为固定而不滚动但它带来背景图像也被拉伸文本? Any idea to fixed it?
任何想法来修复它?
If you want a background image use create a container and with css add the background-image property to the container: url('the path of my img')如果你想要背景图像,请使用创建一个容器,并使用 css 将背景图像属性添加到容器中:url('the path of my img')
Some advice I can give you is:我可以给你的一些建议是:
img图片
Use IMG if you want people to print the page and you want the image to be included by default.如果您希望人们打印页面并且您希望默认包含图像,请使用 IMG。
Use IMG if you want the browser to display an image in proportion to the size of the text.如果您希望浏览器显示与文本大小成比例的图像,请使用 IMG。
Using IMG instead of background-image can drastically improve the performance of animations over a background.使用 IMG 而不是 background-image 可以极大地提高背景动画的性能。
css background-image css 背景图像
Use CSS background-image if the image is not part of the content.如果图像不是内容的一部分,请使用 CSS 背景图像。
Use CSS background-image when the image replaces the text当图像替换文本时使用 CSS background-image
Use CSS background-image combined with CSS background-size:cover in order to stretch a background image to cover the entire container使用 CSS background-image 结合 CSS background-size:cover 以拉伸背景图像以覆盖整个容器
Use CSS background-image if you want people to print the page and you do NOT want the image to be included by default.如果您希望人们打印页面并且您不希望默认包含图像,请使用 CSS 背景图像。
use the object-fit property and object-position property.使用 object-fit 属性和 object-position 属性。 Here you are not actually working on the background.
在这里你实际上并没有在后台工作。 The image is a element not a background.
图像是元素而不是背景。 To make it a background you have to use URL of the image.
要使其成为背景,您必须使用图像的 URL。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.