腾讯云

开发者社区

文档建议反馈控制台

首页

文章/答案/技术大牛

发布

社区首页 >问答首页 >拉伸和缩放CSS背景？

问拉伸和缩放CSS背景？

提问于 2017-12-22 02:41:57

回答 2关注 0查看 309

有没有办法获得CSS的背景来伸展或缩放来填充它的容器？

css

音视频低代码开发方案最快1天上线

推出 TUICallKit 和 TUIRoomKit 低代码集成方案，最快1天接入在线教育、语聊房、在线客服等应用

回答 2

梦飞翔758

发布于 2017-12-22 02:54:54

使用CSS 3属性background-size：

#my_container {

    background-size: 100% auto; /* width and height, can be %, px or whatever. */

郁闷的阿涛

发布于 2017-12-22 02:54:33

对于现代浏览器，您可以使用background-size以下方法完成此操作：

body {

    background-image: url(bg.jpg);

    background-size: cover;

cover 意味着垂直或水平拉伸图像，所以不会平铺/重复。

这将适用于Safari 3（或更高版本），Chrome，Opera 10+，Firefox 3.6+和Internet Explorer 9（或更高版本）。

为了与Internet Explorer的更低版本一起工作，请尝试以下CSS：

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');

-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";

和开发者交流更多问题细节吧，去写回答

CSS背景图片自适应缩放contain/cover

容器

background-size: contain; background-repeat: no-repeat; background-position-x: center; background-position-y: center; background-size属性 contain: 保持图片长宽比缩放，使得容器刚好包含完整图片（上下左右可能有空白） cover: 保持图片长宽比缩放，使得图片刚好覆盖容器（上下左右可能被剪裁）

路过君

2023/02/10

2.3K0

CSS背景图像，镜像翻转、缩放、背景偏移与定位、文字溢出处理

css

此处，rotateY(180deg) 这里的 Y 表示元素以Y轴镜像翻转，也即水平翻转；同理， rotateX(180deg) 表示以X轴为镜像翻转，即垂直翻转。

AlexTao

2020/05/09

18.6K0

【CSS】CSS 背景设置 ⑦ ( 背景简写 )

css background 语法

使用 CSS 样式设置盒子背景时 , 需要设置多个 CSS 样式 , 设置背景图片 , 平铺模式 , 定位方式 , 附着方式等 , 下面是一个完整的图片背景设置的代码 , 代码很繁琐 ;

韩曙亮

2023/03/30

2.8K0

【CSS】CSS 背景设置 ① ( 背景颜色 | 背景图片 | 背景平铺 )

css background repeat rgb 语法

CSS 的背景颜色样式语法 : 默认的背景颜色是 transparent 透明 ;

韩曙亮

2023/03/30

6.1K0

css颜色介绍和背景设置

alpha background center fixed repeat

现在美丽网页的设计图中颜色五花八门的，网页模块中漂亮背景图也很多，网页中颜色和背景设置必不可少，接下来我们就先学颜色是如何表达的，要知其然，知其所以然。

呆呆

2021/09/28

1.8K0

【CSS】CSS 背景设置 ⑨ ( 背景半透明设置 )

css alpha 语法

在使用时 , 可以省略 0.x 前面的 0 , 直接使用 .x 作为透明度值 , 如 :

韩曙亮

2023/03/30

3.3K0

CSS——背景

attachment background image repeat size

定义背景(Background）属性是对HTML元素的背景进行定义的CSS属性。概述通过边框和背景的样式设置，给元素增加更丰富的外观背景的设置包含以下内容: 背景填充内容背景填充内容可以是一个固定颜色(background-color属性),可以是图像和渐变(background-image属性) 背景填充方式当背景是图像的时候，可以指定图像的平铺方式(backgroundrepeat属性) 背景填充范围列表元素描述 background background 包括background

Html5知典

2019/11/26

9890

CSS3-边框和背景

node.js

CSS3中边框和样式得到了增强。例如：可以创建圆角边框，使用图像边框，为元素创建阴影。

奋飛

2019/08/15

1.4K0

【CSS】CSS 背景设置 ② ( 背景位置 | 背景位置-方位值设置 )

css background center position 语法

background-position 属性值可以是 length 长度 , 也可以是 position 方位 ;

韩曙亮

2023/03/30

4.1K0

CSS3-边框和背景

node.js

CSS3中边框和样式得到了增强。例如：可以创建圆角边框，使用图像边框，为元素创建阴影。

奋飛

2021/08/30

7420

GDI+拉伸或者缩放图片并另存为

编程算法

其实就绘制一个图片然后存为文件，同理也可以自己作画，然后保存为文件。直接上代码，这里只是另存为了png格式，如需另存为其他格式，请自行查询。 void Saveimg(const wstring& strsrcImg,const wstring& strdstFile,const int& nDstX,const int& nDstY) { Bitmap srcImg(strsrcImg.c_str()); Bitmap dstImg(nDstX,nDstY); Graphics gdip(&dst

大菊观

2019/07/02

1.7K0

CSS渐变背景

css html

星宇大前端

2019/01/15

2.1K0

html背景图片拉伸解决办法

html attachment background fixed size

作用是图片只拉伸到当前一页屏幕大小，内容超出一夜后，滚动滚动条值会滚动内容，背景图不动

全栈程序员站长

2022/11/10

1.7K0

前端基础-CSS缩放zoom

语法

二、缩放zoom 语法：zoom:值取值：值是一个倍数 <head> <meta charset="utf-8"> <title>无标题文档</title> <style> .box{ width:200px; height:200px; border:1px solid #000; } div.box:hover{ transform:scale(2); /*zoom:2;*/ } .box1{ width:100px; height:100px; bac

cwl_java

2020/04/01

1.1K0

【CSS】CSS 背景设置 ⑥ ( 背景附着 | background-attachment )

css attachment background scroll 语法

background-attachment 属性值设置 : scroll 或 fixed 二选一 ;

韩曙亮

2023/03/30

1.6K0

【CSS】CSS 背景设置 ⑥ ( 背景附着 | background-attachment )

css 背景透明

css

今天在开发一个漂浮在背景图上方的模态动画，之前只记得opacity和rgba可以实现透明度设置，但是在实现“背景透明，文字不透明”的效果中却不是都可行的，下面我们就来实际测试一下。

IT工作者

2022/02/15

2.9K0

CSS背景(background)

php javascript css

背景颜色(color) 语法： background-color:颜色值; 默认的值是 transparent 透明的背景图片(image) 语法： background-image : none | url (url) 参数作用 none 无背景图（默认的） url 使用绝对或相对地址指定背景图像 background-image : url(images/demo.png); 小技巧：我们提倡背景图片后面的地址，url不要加引号。背景平铺（repeat）语法： backgroun

乐心湖

2020/07/31

1.4K0

CSS 背景(background)

css php

background-image 属性允许指定一个图片展示在背景中（只有CSS3才可以多背景）可以和 background-color 连用。如果图片不重复地话，图片覆盖不到地地方都会被背景色填充。如果有背景图片平铺，则会覆盖背景颜色。

星辰_大海

2020/09/30

2.1K0

【CSS】：颜色、背景

css https 网络安全网站

CSS 数据类型 <color> 表示一种标准RGB色彩空间（sRGB color space）的颜色。一种颜色可以用以下任意的方式来描述：

WEBJ2EE

2020/03/02

2.9K0

【移动端网页布局】移动端网页布局基础概念 ⑥ ( 背景图像缩放 | 不等比例拉伸 - 同时设置宽高值 | 等比例拉伸 - 设置宽度 / cover / contain 值 )

容器布局基础模型移动端

盒子模型的背景图片尺寸是通过 background-size 属性设置的 , 语法如下 :

韩曙亮

2023/04/24

1.1K0

【移动端网页布局】移动端网页布局基础概念 ⑥ ( 背景图像缩放 | 不等比例拉伸 - 同时设置宽高值 | 等比例拉伸 - 设置宽度 / cover / contain 值 )

相似问题

网站建设，图片拉伸错乱问题？

064

如何在同一个元素上组合背景图像和CSS3渐变？

2315

实时音视频TRTC调整画面旋转和缩放？

1479

Normalize.css和Reset CSS有什么区别？

21.4K

nginx无法解析js和css？

21.3K

问拉伸和缩放CSS背景？

音视频低代码开发方案最快1天上线

回答 2

梦飞翔758

郁闷的阿涛

网站建设，图片拉伸错乱问题？

如何在同一个元素上组合背景图像和CSS3渐变？

实时音视频TRTC调整画面旋转和缩放？

Normalize.css和Reset CSS有什么区别？

nginx无法解析js和css？

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐