<body>背景图片设置的心得

最新推荐文章于 2024-01-14 18:31:58 发布
最新推荐文章于 2024-01-14 18:31:58 发布
阅读量4.9k 收藏
点赞数
分类专栏： web前端 文章标签： scroll
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xidiandj/article/details/7902628
版权

图片尽量选择比较宽的，比如1366px的，这样可以适应大多数的显示器

高度的适应：可以这样，选择底部颜色基本一致的图片，得到图片的颜色编码，给<body>元素的background-color属性设置为这个颜色，这样在页面内容比较长，图片的高度不够时，有相同颜色的背景色做填补，图片不会显得不自然，background-position属性设置为top center，靠中上显示，background-attachment属性设置为scroll，背景图片随滚动条滚动

xidiandj
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
网页body背景图片拉伸
12-10
源代码：背景图片自动拉伸，背景永远都是一张整图
美食俱乐部
02-15
`<html>`元素是整个文档的根元素，`<head>`包含文档元数据，如标题、字符集设置等，而`<body>`则包含网页的可见内容，如文本、图片、链接等。 在创建美食页面时，`<h1>`到`<h6>`用于设置标题层级，展示菜品的名称或...
body设置背景图片
wzy1414的博客
03-16 3208
body设置背景图片 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>企业员工薪水绩效表</title> </head> <!-- 一个表格包含多行，一行包含多个单元格 --> <body style="background-image: url(C:/Users/王正宇/Pictures/动漫图片/智乃酱.pn
给body设置背景图片
Templar136的博客
03-06 1万+
效果 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title
body背景设置
lonely_wolf的博客
06-19 826
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;met
web前段学习心得体会.pdf
12-17
5. **底图**：底图是页面背景的一部分，通常设置在`<body>`标签内，作为页面的基础视觉元素。 6. **齐底线**：用于区分横切或页面区块的结束，可以是一条线或者图形，增强视觉层次感。 7. **页面结构**：页面的...
关于多行文字水平垂直居中的一点心得分享
09-25
<body> <div class="wrapper"> <div class="content">多行文字居中 多行文字居中 多行文字居中</div> </div> </body> </html> ``` 这种方法虽然有效，但并不适用于所有情况。例如，如果需要居中的元素是动态内容...
ukawaportfolio
03-17
`<body>`则包含用户在浏览器中看到的实际内容。 2. **标题标签**：`<h1>`到`<h6>`定义了不同级别的标题，用于组织页面结构和内容层次。 3. **段落与引用**：`<p>`用于创建段落，`<blockquote>`用于引用外部内容。 ...
blog:博客
03-10
例如，可以定义`<h1>`的字体大小、颜色，`<p>`的行距，或者设置背景颜色和边距等。同时，JavaScript也可能用于实现交互功能，如动态加载评论、表单验证或动画效果。 在"blog-gh-pages"这个文件夹中，很可能包含了...
HTML如何设置背景图片？有几种设置背景图片的办法？
最新发布
爱编程的鱼的博客
01-14 2万+
我们在编辑网页时，如果觉得网页过于单调，这时便可以加上一张自己喜欢的背景图。这篇文章中，W3Cschool 小编给大家介绍下 HTML 中如何设置背景图片，分别有哪几种设置背景图片的方法。
html处理文字换行
weixin_46381471的博客
06-28 580
html处理文字换行 1.word-break:break-all.只对英文起作用，以字母作为换行依据 2.word-wrap:break-word. 只对英文起作用，以单词作为换行依据 3.white-space:pre-wrap.只对中文起作用，强制换行 4.white-space:nowrap.强制不换行，都起作用 5.white-space:nowrap. overflow:hidden text-overflow:ellipsis. 不换行，超出部分隐藏且以省略号形式出现
body加背景图片没反应_body背景图片,给body加背景图片
weixin_36189159的博客
12-30 2210
在CSS布局时，可能有时会遇到对body直接设置图片作为网页背景水平纵向平铺(从上到下居中平铺)，此时整个网页无论内容是否占满一屏幕，css背景都会从上到下铺(纵向)满整个屏幕。但有时我们不需要这样的一个效果，需要内容占用多高，body背景就纵向从上到下铺满多少高度。很明显这样就达不到我们想要的效果。解决方法：对html再设置个背景(无论图片还是纯色，推荐设置纯颜色的背景颜色)接下来DIVCSS5...
HTML设置body背景图片全屏显示
weixin_30788619的博客
09-20 2万+
在head标签中添加body属性设置： <head><style>body{background:url(timg1.jpg) top left;background-size:100%;}</style></head> 转载于:https://www.cnblogs.com/ming-4/p/11556734.html...
css里面如何设置body背景图片满屏
chuluxie3918的博客
08-26 3780
本文转载于:猿2048网站css里面如何设置body背景图片满屏 @{ Layout = null; ViewBag.Title = "Login Page"; } <!DOCTYPE html> <html> <head> ...
HTML5 body设置全屏背景图片 如何让body的背景图片自适应整个屏----实战经验
weixin_34236497的博客
12-28 1万+
2019独角兽企业重金招聘Python工程师标准>>> ...
js 设置body背景图片
ruirui
03-31 1万+
<br />body{background:url(<%=imgUrl%>) no-repeat top; margin:0px; padding:0px; font-size:12px; color:#525252;}<br /> <br />protected string imgUrl = "images/bag_1.jpg";<br /> <br />#region 生成不同随机数的方法<br />        /// <summary><br />        /// 生成不同随机数的方法<b
如何让body背景图自适应浏览器窗口大小
热门推荐
Anna
10-19 3万+
这两天真的被背景图问题弄的头大，一会是浏览器窗口大小改变，背景图就重复，或者是浏览器有滚动条，或者加上no-repeat之后，重复的部分就变成空白！！！真的是一个头，两个大！！！！！ 现在终于找到解决方法了，不仅不重复，还没有滚动条，简直整个人都解放了，哈哈哈！下面附上代码，其实是特别简单的问题，但某些时候，我们就是会被一些很小的问题困扰很久...... html{
html 设置body背景图片
海狼莹的专栏
07-23 1万+
全屏截图太大了，我只
<body></body>
12-21
<body></body>是HTML中的标签，用于定义HTML文档的主体...在上面的例子中，<body></body>标签包含了网页的主要内容，包括一个标题（<h1>标签）、一个段落（<p>标签）、一张图片（<img>标签）和一个链接（<a>标签）。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值