css怎么设置背景图片自适应大小

在css中，可以利用“background-size”属性设置背景图片自适应大小，该属性用于设置背景图片的大小，只需要给背景图片元素添加“background-size:cover;”样式，即可使背景图片的大小自适应。

本教程操作环境：windows10系统、CSS3&&HTML5版、Dell G3电脑。

css怎么设置背景图片自适应大小

在css中，可以利用background-size属性设置背景图片的自适应大小，该属性用于指定背景图片大小。当该属性的值为cover时，此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。

下面我们通过设置页面背景图片自适应来看一下，示例如下：

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>body{background-image:url("1118.02.png") ;background-size:cover;}</style></head><body></body></html>

输出结果：

完

css怎么设置背景图片自适应大小相关推荐

用css使用html设置背景图片自适应,CSS怎么设置背景图片自适应全屏？附源码！...
不少同学在设置网站背景图片时会遇到这么一个问题:背景图片总是不能铺满整个屏幕,不是图片太小就是图片被过度放大,显得不太美观.那么 CSS 怎么设置背景图片自适应全屏呢?这篇文章告诉你. 实现效果: 源 ...
YDOOK : CSS div 设置背景图片大小自动缩放
YDOOK : CSS div 设置背景图片大小自动缩放设置示例: 选择器{width:100%;height:100%;background-repeat:no-repeat:background ...
css如何设置背景图片？background属性添加背景图片
在前端开发过程中,为了页面的美观,往往都会给html页面添加背景图片.那么如何利用css设置html中用图片做背景?本章就给大家介绍css怎样设置背景图片.有一定的参考价值,有需要的朋友可以参考一下, ...
怎么把html背景图片,css如何设置背景图片？
在前端开发过程中,为了页面的美观,往往都会给html页面添加背景图片.那么如何利用css设置html中用图片做背景?本文就给大家介绍css怎样设置背景图片. css可以通过background-ima ...
[css] 如何设置背景图片不随着文本内容的滚动而滚动？
[css] 如何设置背景图片不随着文本内容的滚动而滚动? 直接对div设置background:url不就好了嘛?上代码.<!DOCTYPE html> <html lang=&qu ...
css：css样式背景图片设置透明度,css如何设置背景图片的透明度
1. 了解css如何设置背景图片的透明度注意: css中无法直接给背景图片加 opacity 属性,可以使用下面的方法来给background-image加上我们想要的透明度opacity. 2. ...
HTML 设置背景图片自适应
HTML 设置背景图片自适应 background: url(xxx.png) no-repeat fixed; background-size:100% 100%;
php图片背景平铺,css如何设置背景图片的平铺方式？css设置背景图片平铺的方法（图文详解）...
css如何设置背景图片的平铺方式?本文就给大家介绍css是如何设置背景图片平铺的方法,让大家了解在css中设置背景图片水平方法平铺.垂直方向平铺,或者是不平铺的方法.有一定的参考价值,有需要的朋友可以 ...
css设置背景图片的大小、填充方式
我们可以指定像素值或百分比确定背景图片的大小示例 <p> Lorem ipsum,中文又称"乱数假文", 是指一篇常用于排版设计领域的拉丁文文章 ,主要的目的为测试文 ...

css怎么设置背景图片自适应大小

css怎么设置背景图片自适应大小相关推荐

最新文章

热门文章