CSS3的background-size：设置背景图片大小

最新推荐文章于 2024-07-08 12:47:09 发布
最新推荐文章于 2024-07-08 12:47:09 发布
阅读量3.4k 收藏 2
点赞数 1
分类专栏： CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fujian9544/article/details/105544540
版权

说明

background-size: length|percentage|cover|contain;

此属性是用来设置 ：背景图片的大小

length|percentage|：是用来设定背景图片的大小  相对于背景区域来说的

cover：此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。意思是背景图片保持纵横比 的最小的

contain:此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。意思是背景图片不用完全

例子 

思维小刀
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
background-image 背景平铺方式、 CSS3 background-size背景图像大小
m0_71814235的博客
07-27 6811
background-image 背景平铺方式、 CSS3 background-size背景图像大小
CSS3背景（background-size、background-origin、background-clip）圆角
m0_64460142的博客
04-04 2395
1.background-size，规定背景图像的尺寸 当图片需要用背景图像设置需求时使用background：url（图片路径）使用，但是图片大小时原本图片的尺寸，伪类把它变成自己需求的尺寸就可以使用background-size。如下： <style> .box{ width: 400px; height: 200px; border: 2px solid rgb(76, 234, 234); ...
关于background-image调整大小和位置的方法笔记
xiaoshen66的博客
07-19 3684
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #divtest{ width:400px;...
(css)background-image设置背景图片大小
nyf_unknow的博客
05-26 2101
【代码】(css)background-image设置背景图片大小。
【前端】css控制背景图片缩放
最新发布
姜太小白的博客
07-08 1198
css控制背景图片缩放
设置背景图片大小的方法
我的成长历程
08-07 1万+
等比例缩放填满盒子
background-image属性设置图片尺寸_HT For Web 拓扑图背景设置
weixin_39612720的博客
11-28 620
HT For Web 的HTML5拓扑图组件graphView背景设置有多种途径可选择：divBackground：通过css设置graphView对应的div背景Painter：通过graphView.addBottomPainter(function(g, rect){…})来绘制背景Layer：通过设置graphView.setLayer(['…', '…', '…', …])来将graph...
CSS-Background-Generator:https
04-07
- `background-size`: 控制背景图像的大小，可为百分比、像素值或`cover`、`contain`关键字。 - `background-attachment`: 决定背景图像是否随滚动而移动，`fixed`或`scroll`。 2. **JavaScript与CSS的交互**： ...
CSS3之背景尺寸Background-size使用介绍
09-25
CSS3中的background-size属性是用于控制元素背景图像的尺寸。无论背景图片的原始尺寸如何，都可以通过这个属性来调整其在元素中的显示大小。background-size属性的引入为网页设计提供了更多的灵活性。 1. 属性值...
CSS3--背景：图片大小、位置区域和剪裁
weixin_44348052的博客
07-14 3328
img1所在图层位于img2的上方，会对img2造成遮盖效果，因此可以利用这个特点合理定位背景图片和其他属性从而创造出由多张图片组合而成的背景。 二、背景图片的位置区域 background-origin对于盒子模型，包含外边距、边框、内边距和内容几部分，这几部分内容是一层层嵌套的。该属性设置的就是背景图片将从哪里开始显示，参数值和其代表意义如下： 三、背景图片剪裁 background-clip参数值和origin一样有三种，background-origin是...
如何使用CSS设置背景图像的大小？
weixin_45587319的博客
11-07 1631
如何使用CSS设置背景图像的大小？下面本篇文章就来给大家介绍一下使用CSS设置背景图像大小的方法，希望对大家有所帮助。 CSS background-size属性可用于设置背景图像大小；使用height和width属性值来设置背景图像的大小。 语法： background-size: width height; 注意： ●　如果省略第一个值，则图像采用其原始宽度。 ●　如果省略第二个值，则图像...
背景图片的位置及大小，background-size属性讲解
谷小伟的博客
08-10 1万+
今天讲解一下简单的背景图片大小、位置，因为前段时间遇到手机上下留白太多，背景图片被拉伸的问题 主要是对background-size属性值的各个演示 使用的图片是这张 400*640大小 老规矩，直接代码效果图，大家肯定能看明白 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head lang="en"&gt; &lt;meta char...
CSS3如何调整背景图片大小
热门推荐
CH_Y的博客
10-20 2万+
在CSS3中，如果想要调整背景图片的大小可以通过设置background-size属性进行设置。
CSS的background 背景图片自动适应元素大小,实现img的默认效果 background-size:100% 100%；
kfepiza的博客
02-17 5262
background-image:url(./200x200测试用黑底图片_2024-02-17_02-47-58.png);background-image:url(./200x200测试用黑底图片_2024-02-17_02-47-58.png);background-image:url(./200x200测试用黑底图片_2024-02-17_02-47-58.png);background-image:url(./200x200测试用黑底图片_2024-02-17_02-47-58.png);
css 背景图片 background-size属性值
weixin_43915401的博客
01-13 257
1 length固定值 背景图片宽度 背景图片高度 如果只有一个值，第二个设为auto 2 百分比 背景图片对于背景定位区域宽度的百分比 背景图片对于背景定位区域高度的百分比 如果只有一个值，第二个设为auto 3 cover 保持图像纵横比，并将图像缩放成完全覆盖背景定位区域的最小大小，多余部分不会显示 4 contain 保持图像纵横比，并将图像缩放成适合背景定位区域的最大大小，可能会存在白边 ...
理解css3中的background-size
tiny_wei的博客
06-19 267
background-size 基本语法background-size:length | percentage | cover | contain ; length : 设置背景背景图片的宽度和高度，第一个若给定了值，第二个值为auto；会截取图片，不适用；percentage : 以父元素的百分比设置图片的宽度和高度，若第一个给定了值，第二个值为auto；cover : 将背景图像扩展的足够大，...
css禁止背景图拉伸,CSS：如何强制背景图像拉伸/压缩以适应div，而不保持纵横比...
weixin_42223667的博客
02-23 471
I'm having a frustrating issue, and would love some help.I've written a script to allow me to resize a div on screen for an application I'm building for a client, but I've run into a humorous issue I'...
CSS3 新属性篇(五)：background-size属性
madman0621的博客
10-03 2万+
目录： background-size属性介绍 演示代码 background-size属性分析 设置固定尺寸的背景图片 背景图片的宽高是根据自身所属元素的宽高以百分比进行缩放 背景图片扩展并覆盖填充满整个所属元素区域 背景图片尺寸宽度和高度完全适应内容区域 一、background-size属性介绍 CSS3 的 background-size 属性能调整背景图片的大小，从而替代了用...
html5中背景图片的大小怎么调,css中怎么改变背景图片大小？
weixin_30724041的博客
06-04 4867
在CSS中，想要改变背景图片的大小，可以通过设置background-size属性来实现。下面本篇文章就来给大家介绍一下使用background-size属性改变背景图片大小的方法，希望对大家有所帮助。background-size属性规定背景图像的尺寸，可通过长度值或百分比来设置图片大小，或者通过cover和contain来对图片进行伸缩设置。语法：background-size: length...
@charset "utf-8"; #homemasthead { background-image: url("美丽家乡/罗田.jpg"); background-size: cover; background-position: center; font-family: 'Fuzzy Bubbles', cursive; } #Secondpage { background-image: url("美丽家乡/美丽家乡1.jpg"); background-size: cover; background-position: center; font-family: 'Fuzzy Bubbles', cursive; }#nav { background-color: #AFEBAA; font-family: 'BIZ UDPMincho', serif; } .bg-dark { background-color: #476C9A !important; } .display-1 { font-size: 80px; } #home { background-color: #C7DDF8; font-family: 'BIZ UDPMincho', serif; } #about { background-color: #C7DDF8; font-family: 'BIZ UDPMincho', serif; } .img-fluid { max-width: 120%; height: auto; } #footer { background-color: #476C9A; font-family: 'Fuzzy Bubbles', cursive; color: #F8FBBE; } #links { font-family: 'Fuzzy Bubbles', cursive; text-decoration: underline; } a { color: black; } a:link, a:visited { color: #F8FBBE; } a:hover { color: #B2BC1A; } #references { text-decoration: underline; } #refimages a { color: #00B510; text-decoration: underline; } #refimages a hover {}
06-04
- background-image、background-size、background-position：设置背景图片的属性，包括图片地址、尺寸和位置。 - font-family：设置字体。 - background-color：设置背景色。 - color：设置文本颜色。 - .img-fluid...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值