文章 专题 AI工具 学习 下载 问答 源码 最近更新
PHP
会员中心 讲师中心 微信公众号
首页 > web前端 > css教程 > 正文

css怎么让背景图拉伸

醉折花枝作酒筹
发布： 2021-07-26 15:29:54
原创
17644人浏览过
在css中，可以使用background-size属性让背景图拉伸，只需要给元素设置“background-size:100% 100%;”样式即可。该属性可以以父元素的百分比来设置背景图像的宽度和高度。

css怎么让背景图拉伸

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

background-size 属性规定背景图像的尺寸。

语法

1

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

登录后复制

HH0QT4TE]V4J)FD7XKX6TXR.png

立即学习“前端免费学习笔记（深入）”；

实例：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

<!DOCTYPE html>

<html>

<head>

<style>

div

{

background:url(/i/bg_flower.gif);

background-size:35% 100%;

-moz-background-size:35% 100%; /* 老版本的 Firefox */

background-repeat:no-repeat;

}

</style>

</head>

<body>

 

<div>

<p>这是一个段落。</p>

<p>这是一个段落。</p>

<p>这是一个段落。</p>

<p>这是一个段落。</p>

<p>这是一个段落。</p>

<p>这是一个段落。</p>

<p>这是一个段落。</p>

<p>这是一个段落。</p>

<p>这是一个段落。</p>

</div>

 

</body>

</html>

登录后复制

效果

(XY0]S2]9{JI4N)U3OZWIZB.png

推荐学习：css视频教程

以上就是css怎么让背景图拉伸的详细内容，更多请关注php中文网其它相关文章！

最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。

下载
相关标签：
css html5 css css3 background
来源：php中文网
收藏 点赞
上一篇：css中:not用法是什么 下一篇：利用CSS如何实现全兼容的毛玻璃效果？（代码详解）
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
CSS怎样制作悬浮3D翻转卡片？transform-style应用 要制作CSS悬浮3D翻转卡片，关键在于正确使用perspective、transform-style:preserve-3d和backface-visibility:hidden；1.首先在父容器.scene上设置perspective以建立3D透视环境；2.在.card-container上应用transform-style:preserve-3d，确保子元素在3D空间中保留立体位置；3.为.card-face设置backface-visibility:hidden，防止背面内容在不应显示时被
2025-08-08 13:41:01
601
CSS怎样固定表头滚动表格？display:block技巧 固定表头滚动表格的核心是将thead和tbody视觉分离，通过display:block让二者脱离默认表格布局流；2.关键步骤包括：用容器div包裹table并设置最大高度和overflow-y滚动，为table设置table-layout:fixed以固定列宽，将thead和tbody设为display:block使其可独立控制，同时为tr设置display:table和width:100%以保持列对齐；3.需解决列宽不对齐问题，通过table-layout:fixed和统一th/td宽度确保
2025-08-08 13:35:01
256
CSS如何制作悬浮卡片层叠展开？transform过渡延迟 实现悬浮卡片层叠展开的核心是利用transform和transition属性，通过设置transform实现位移与旋转，transition实现过渡动画，transition-delay控制延迟，从而在:hover时使卡片依次展开；1.使用position:absolute将卡片堆叠在容器中；2.为.card添加transition:transform0.5sease实现平滑动画；3.在.card-container:hover下，通过:nth-child选择器为每张卡片设置不同的transfo
2025-08-08 13:16:01
672
CSS怎样处理中文标点避头尾？text-spacing属性 text-spacing属性通过trim-start和trim-end（或trim-both）值智能调整行首行尾标点符号的间距，间接缓解中文标点挤压和避头尾问题；2.配合line-break:strict、word-break:keep-all、hanging-punctuation及text-justify:inter-character等属性，可系统性优化中文排版；3.实际应用中面临浏览器兼容性不一、渲染引擎差异、与其他排版属性交互复杂及调试困难等挑战，需结合降级方案并以line-break
2025-08-08 12:58:01
968
CSS如何适配孟加拉文字体？font-display策略 使用@font-face结合font-display:swap;确保孟加拉文字体加载期间用系统字体快速显示内容，避免FOIT；2.优先采用WOFF2格式并配合预加载关键字体，提升加载速度；3.通过字体子集化、变体字体和合理回退栈优化性能与兼容性；4.选用高质量字体如NotoSansBengali，并设置合适的line-height、font-feature-settings以保障排版精度；5.在真实设备与多浏览器环境下测试，确保渲染一致性；6.使用rem或em等相对单位实现响应式字体适配，最终实
2025-08-08 12:25:01
340
CSS怎样制作3D翻转卡片？transform-style应用 实现3D翻转卡片的核心是正确使用perspective、transform-style:preserve-3d和backface-visibility:hidden；1.父容器.card-container必须设置perspective以建立3D视图空间；2.翻转元素.card需应用transform-style:preserve-3d，使子元素在3D空间中渲染；3.正反面.card-face需设置backface-visibility:hidden，避免背面内容重叠显示；4.翻转动画应作用于.
2025-08-08 12:20:02
377
CSS怎样制作呼吸灯效果？animation动画循环 除了不透明度，还可以使用box-shadow、filter:brightness()、transform:scale()、background-color（结合渐变）等属性制作呼吸灯效果；1.box-shadow可通过改变阴影大小和颜色模拟光晕变化；2.filter:brightness()可调整元素亮度实现明暗呼吸；3.transform:scale()能让元素缩放产生心跳感；4.background-color配合渐变可实现色彩流动的呼吸效果；这些属性可单独使用或组合叠加，以增强视觉层次和动
2025-08-08 12:15:01
196
CSS怎样制作打字机效果？@keyframes动画实战 CSS制作打字机效果的核心是利用@keyframes定义动画，结合steps()函数实现字符逐个显示，并通过border-right模拟光标闪烁；1.首先设置文本容器的overflow:hidden和white-space:nowrap，确保文本不换行且超出部分隐藏；2.将文本初始宽度设为0，通过animation调用typing动画逐步增加宽度至100%；3.使用steps(N,end)将动画分割为N个离散步长，使文本以字符为单位逐个显现，其中N应匹配文本字符数；4.定义typing动画从wi
2025-08-08 11:26:01
366
CSS怎样制作图片模糊聚焦效果？filter模糊过渡动画 除了鼠标悬停，还可通过1.点击事件（JavaScript监听click并切换类名）、2.页面滚动（结合IntersectionObserverAPI检测视口进入）、3.表单控件状态（利用:checked配合CSS选择器）来触发图片模糊聚焦效果；这些方法扩展了交互场景，使图片在用户点击、滚动至指定区域或切换选项时从模糊变清晰，提升动态体验。
2025-08-08 11:23:01
970
CSS如何创建动态网格间隙动画？grid-gap过渡效果实现 grid-gap无法直接过渡，因它是布局属性，触发重排而非连续插值；2.可通过动画网格项的margin或padding模拟间隙变化，简单但改变元素尺寸；3.利用CSS变量结合calc()和margin/padding实现灵活控制，变量驱动可维护性强；4.使用transform缩放或位移元素创造间隙变化错觉，性能优但非真实间隙调整；5.方案选择需根据需求权衡：简单交互用padding/margin，全局控制用CSS变量，创意动效用transform，性能优先选transform。最终应基于项目实际
2025-08-08 11:20:02
589
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
app下载
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部