Loading [MathJax]/jax/input/TeX/config.js

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

社区首页 >专栏 >CSS3实现背景图片平铺

CSS3实现背景图片平铺

作者头像

Qicloud

发布于 2022-01-28 06:32:12

发布于 2022-01-28 06:32:12

1.2K00

代码可运行

举报

文章被收录于专栏：七云博客七云博客

运行总次数：0

代码可运行

使用Bluefoothill的站长跟我讲很多图片不能完全平铺到背景，下面是css的两种背景平铺方法，希望能给您带来帮助

实现代码一：

    body
    {
    background: url('xx.jpg')top center no-repeat; 
    background-size:cover;
    }

实现代码二：

    body
    {
    background:url('back.jpg');
    background-attachment:fixed;
    background-repeat:no-repeat;
    background-size:cover;
    -moz-background-size:cover;
    -webkit-background-size:cover;
    }

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2020/01/26 ，如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

评论

登录后参与评论

暂无评论

编辑精选文章

换一批

万字详解高可用架构设计

Go 开发者必备：Protocol Buffers 入门指南

10分钟带你彻底搞懂分布式链路跟踪

多租户的 4 种常用方案

亿级月活的社交 APP，陌陌如何做到 3 分钟定位故障？

60页PPT全解：DeepSeek系列论文技术要点整理

CSS3随机背景图片切换特效

定义和用法通过 @keyframes 规则，您能够创建动画。创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。在动画过程中，您能够多次改变这套 CSS 样式。以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"，等价于 0% 和 100%。 0% 是动画的开始时间，100% 动画的结束时间。为了获得最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。注释：请使用动画属性来控制动画的外观，同时将动画与选择器绑定。核心css部分(记得切换图

Youngxj

2018/06/06

3.7K0

html+CSS让背景图片充满整个屏幕

浏览器全栈

大家好，又见面了，我是你们的朋友全栈君。由于给网页设置背景图时，需要设置背景图不重复且充满整个浏览器屏幕。给body标签指定背景图，这样背景图就可以填充整个浏览器viewport了。其实，该方案对所有的块级容器都可以生效。块级容器的宽高是动态的，那么背景图将自动伸缩，充满整个容器。可设置body标签的CSS样式如下： body{ /*加载背景图*/ background-image：url（./images/background.jpg）;

全栈程序员站长

2022/09/06

1.8K0

CSS 背景(background)

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

星辰_大海

2020/09/30

2.3K0

【CSS】CSS 总结 ③ ( CSS 背景设置 | 背景颜色 | 背景图片 | 背景图片平铺样式 | 背景图片位置 | 超大背景图片设置 | 背景附着 | 背景样式简写 | 背景半透明 ) ★

css background position repeat 语法

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

韩曙亮

2024/03/12

5.2K0

【CSS】CSS 总结 ③ ( CSS 背景设置 | 背景颜色 | 背景图片 | 背景图片平铺样式 | 背景图片位置 | 超大背景图片设置 | 背景附着 | 背景样式简写 | 背景半透明 ) ★

必应首页平铺背景图片的实现方案

近期某个项目中需要实现以下需求：保持背景图片原始宽高比; 如果屏幕宽高比与背景图片宽高比不一致，则以图片中心为基点等比缩放背景图片，以适应屏幕尺寸。以上需求的原则就是始终保持背景图片宽高比，居中等比缩放填满屏幕。我们知道background-size: cover;是在背景图片保持原始比例的基础上，等比缩放覆盖背景区域。但是缩放的基点是左上角(0,0)，并不是居中缩放的。这样的机制下，屏幕显示的始终是背景图片的左上部分，并不能满足项目的需求。后来无意中注意到必应首页的背景图片是居中平铺的，行为表现与

寒月十八

2018/01/30

1.9K0

完美的背景图全屏css代码 – background-size:cover?

归功于css3.0新增的一个属性background-size，可以简单的实现这个效果，这里用fixed和center定位背景图，然后用background-size来使图片铺满，具体css如下

双面人

2019/04/10

6.8K0

我发现了7个关于 CSS backgroundImage 好用的技巧

https 网络安全 css 编程算法 html

背景图像可能是我们所有前端开发人员在我们的职业生涯中至少使用过几次的CSS属性之一。大多数人认为背景图像不可能有任何不寻常的地方，但经过研究，答案并非如此。所以本文收集了七个我认为最有用的技巧，并创建了一些代码示例。

前端小智@大迁世界

2020/05/26

1.1K0

我发现了7个关于 CSS backgroundImage 好用的技巧

CSS3背景图片background属性简写/连写

在开发中背景属性 background 还是很常用的， background 有很多属性，如 background-color 背景颜色、 background-image 背景图像、 background-position 背景图像的位置、 background-size 背景图片的尺寸、 background-repeat 重复背景图像、 background-origin 定位区域、 background-clip 绘制区域、 background-attachment 是否固定或者跟随页面滚动。

德顺

2019/11/13

5.3K0

CSS3背景图片background属性简写/连写

移动端背景图自适应

/*兼容安卓手机没有高度导致无法显示背景图片*/ html,body{ width:100%; height:100%; } body { background: url(../../image/download.jpg); background-repeat: no-repeat; background-size: 100% 100%; -webkit-background-size: 100% 100%; background-attachment: fixed; -we

愤怒的小鸟

2021/10/14

1.8K0

css 背景图片虚化效果

转载地址：http://blog.csdn.net/ohehehou/article/details/51975539

lin_zone

2018/08/20

4.1K0

IT课程 CSS基础 023_图片、背景

css background it 布局基础

图片是网页中非常重要的媒体类型，恰到好处的使用图片可以使网页多彩生动，不再局限冷冰冰的文字。

zhaoJian.Net

2024/04/03

2270

IT课程 CSS基础 023_图片、背景

html背景图片的设置宽高_网页的背景图片怎么设置

background-size：设置背景图大小，它的属性值有：cover、contain和具体的宽度和高度值（1）cover：浏览器将使图像足够大，使它完全覆盖了盒子区，同时仍然保持其高宽比。在这种情况下，有些图像可能会跳出盒子外，也就是说图像铺满了盒子，但是会有一部分被剪切了

全栈程序员站长

2022/11/10

5.4K0

html背景图片的设置宽高_网页的背景图片怎么设置

【前端】CSS背景属性详解

css background 前端设计性能

background-color 属性用于定义元素的背景颜色，可以是任何合法的 CSS 颜色值，包括十六进制颜色代码、RGB、RGBA、HSL 等。元素的默认背景颜色是 transparent（透明），这意味着没有显式的背景颜色。

CSDN-Z

2025/06/01

1180

css设置背景图片大小自适应_css设置整个页面背景图片

php https java 网络安全

background-image:url(food.jpg);一张图片铺满一行 background-repeat:repeat-x;同一张图片多张铺满横向

全栈程序员站长

2022/09/20

3.3K0

css设置背景图片大小自适应_css设置整个页面背景图片

【Web前端】CSS背景与边框

html background web 前端 css

网页设计中，背景和边框是用于提升视觉效果的关键元素。CSS（层叠样式表）提供了丰富的功能来定制这些视觉效果，确保网页看起来既美观又符合设计需求。

一条晒干的咸鱼

2024/11/19

1480

【Web前端】CSS背景与边框

前端学习(8)~css学习(二)：背景属性

光学显示器中，每个像素都是由三原色的发光原件组成的，靠明亮度不同调成不同的颜色的。r、g、b的值，每个值的取值范围0~255，一共256个值。

Vincent-yuan

2020/02/25

1.5K0

前端学习(8)~css学习(二)：背景属性

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

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

AlexTao

2020/05/09

19.3K0

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

css background 语法

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

韩曙亮

2023/03/30

3K0

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

CSS3实现毛玻璃效果

最近在开发个人博客的时候，在网上学到了一种CSS特效---毛玻璃感觉还是比较实用下面将这种特效分享给大家。如下图，我的后台登录界面表单部分就是毛玻璃效果有时候这种特效很有用，可以达到一种朦胧的效果，接下来我们来看看如何实现它

切图仔

2022/09/08

1K0

【原创】CSS处理文本以及背景图片

opacity overflow size text

一.文本常用属性： 1.文本颜色：color属性 2.文本字体：font-family属性，可以对应多个属性值。

零点

2023/03/03

9570

相关推荐

CSS3随机背景图片切换特效

更多 >

本文部分代码块支持一键运行，欢迎体验

本文部分代码块支持一键运行，欢迎体验