广告位联系
返回顶部
分享到

CSS3调整背景图片大小的代码介绍

css 来源:互联网 作者:佚名 发布时间:2024-01-23 23:31:20 人浏览
摘要

在CSS3中,如果想要调整背景图片的大小可以通过设置background-size属性进行设置。 一、background-size 语法格式 1 background-size: length|percentage|cover|contain; 二、参数详解 使用的例子背景图片

在CSS3中,如果想要调整背景图片的大小可以通过设置background-size属性进行设置。

一、background-size 语法格式

1

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

二、参数详解

使用的例子背景图片

1.length

length:设置背景图片的高度与宽度。第一个值设置宽度,第二个值为高度。如果只给出第一个值,那么第二值则设置为auto(自动)。

举例,将背景图片改为20emx20em(默认1px = .05em)

1

2

3

4

5

6

width: 30em;

height: 22em;

background: greenyellow;

background-size:20em 20em;

background-image: url("src/assets/csdn/bg.jpg");

background-repeat: no-repeat;

2.percentage

percentage:将计算相对于背景定位区域的百分比。第一个值设置宽度,第二个值为高度,各个值之间以空格 隔开指定高和宽,以逗号 , 隔开指定多重背景。如果只给出一个值,第二个是设置为auto(自动)。

1

background-size:80% 70%;

3.cover

cover:保持图像的横纵比将图像缩放成完全覆盖背景定位区域的最小大小。

1

background-size:cover;

4.contain

contain:保持图像的横纵比将图像缩放成适应背景区域的最大大小。

1

background-size:contain;


版权声明 : 本文内容来源于互联网或用户自行发布贡献,该文观点仅代表原作者本人。本站仅提供信息存储空间服务和不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权, 违法违规的内容, 请发送邮件至2530232025#qq.cn(#换@)举报,一经查实,本站将立刻删除。
原文链接 :
相关文章
  • CSS实现一个渐变色箭头的代码

    CSS实现一个渐变色箭头的代码
    产品希望在漏斗图的旁边,每一层漏斗边上加上一个渐变色的箭头,效果如下: 实现 网上大部分的箭头实现都是利用一个div来实现箭头躯干
  • CSS3调整背景图片大小的代码介绍

    CSS3调整背景图片大小的代码介绍
    在CSS3中,如果想要调整背景图片的大小可以通过设置background-size属性进行设置。 一、background-size 语法格式 1 background-size: length|percentage|co
  • css3中nth-child()的用法介绍

    css3中nth-child()的用法介绍
    nth-child(n)是css3中的一种选择器,它的作用是匹配属于其父元素的第n个元素,不论元素的类型。重点是不论元素的类型这句话,好多人容
  • CSS实现风吹动树叶的动画效果的代码

    CSS实现风吹动树叶的动画效果的代码
    如题,要实现树叶在风中摇摆的动画,首先准备主体:树叶。 这里准备了两张矢量的高清版 SVG 格式的不同种类的树叶。 首先我们使用img标
  • CSS中的linear-gradient参数学习与使用教程介绍

    CSS中的linear-gradient参数学习与使用教程介绍
    定义与方法 inear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片。创建一个线性渐变,需要指定两种颜色,还可以实现不同
  • 纯css实现自动+手动图片轮播效果的代码
    1.图片自动轮播 创建2个盒子,一个盒子进行轮播图展示,一个盒子用来承载图片 1 2 3 4 5 6 7 8 9 10 11 12 13 body !-- 创建外部展示容器 -- div cla
  • CSS实现轮播图效果(自动切换、无缝衔接、小圆点

    CSS实现轮播图效果(自动切换、无缝衔接、小圆点
    1、基础 html 代码 使用ul-li放入多张需要轮播的图片 使用input标签指定type=radio创建小圆点按钮,并设置单独的 id 属性 使用label的 for 属性指定
  • CSS中常见选择器的介绍与使用
    CSS选择器是CSS的基石,赋予开发者精确控制HTML文档中元素样式的能力。选择器定义了CSS规则集将应用到HTML文档的哪一部分,通过不同类型的
  • css3实现动画无限循环介绍
    要在CSS3中实现动画的无限循环,你可以使用animation属性和infinite关键字。以下是一个示例: 1 2 3 4 5 6 7 8 @keyframes myAnimation { 0% { /* 起始状态
  • 使用纯CSS实现网页阅读进度条的代码

    使用纯CSS实现网页阅读进度条的代码
    为了构建一个阅读进度条,即显示用户向下滚动时阅读文章的进度,很难不考虑 JavaScript。但是,事实证明,您也可以使用纯 CSS 构建阅读进
  • 本站所有内容来源于互联网或用户自行发布,本站仅提供信息存储空间服务,不拥有版权,不承担法律责任。如有侵犯您的权益,请您联系站长处理!
  • Copyright © 2017-2022 F11.CN All Rights Reserved. F11站长开发者网 版权所有 | 苏ICP备2022031554号-1 | 51LA统计