<!DOCTYPE html> <html> <head> <meta charset="UTF-8" name="referrer" content="no-referrer" /> <!-- <link rel="stylesheet" type="text/css" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">--> <style> p{ text-indent: 50px; /* 缩进文本 */ } h2, h3, h4, h5{ text-indent: 20px; /* 缩进文本 */ } /*body{*/ /* background-image: url("https://cdn.pixabay.com/photo/2020/04/22/15/25/stag-5078652_960_720.png");*/ /* background-repeat: repeat-x;*/ /*}*/ /* body{*/ /* background-image: url("https://cdn.pixabay.com/photo/2020/04/22/15/25/stag-5078652_960_720.png");*/ /* background-repeat: no-repeat;*/ /* background-position: right top;*/ /* margin-right: 300px;*/ /* background-attachment: fixed;*/ /* }*/ body { margin-left: 500px; background: #5d9ab2 url("https://cdn.pixabay.com/photo/2020/04/22/15/25/stag-5078652_960_720.png") no-repeat right top fixed; } .center_div { border: 1px solid gray; margin-left: -500px; margin-right:100px; width: 80%; background-color: #d0f0f6; /*background-color: lightskyblue;*/ text-align: left; padding: 8px; } /*{*/ /* border: 1px solid gray;*/ /* margin-left: unset;*/ /* margin-right: auto;*/ /* 90%;*/ /* background-color: #d0f0f6;*/ /* text-align: left;*/ /* padding: 8px;*/ /*}*/ </style> </head> <!--<body style="background-color: lavender">--> <!--<body style=" background-image: url("live_icon.png")">--> <div class="center_div"> <h1>注释、颜色、背景</h1> <h4 style="color:pink"> /*遇到的：给多个元素比如h2,h3同时设置样式时，需要用逗号隔开——> h2, h3, h4, h5{......}*/</h4> <h2>一.注释</h2> <h3>1.单行注释和多行注释</h3> <p>使用'/**/'，表达：‘/* 单行或多行 */’</p> <h2>二.颜色</h2> <h3>1.设置元素的背景颜色</h3> <p>给标题或者p添加style background-color:颜色</p> <p>如：style="background-color:Dodgerskyblue;"</p> <h5 style="background-color: pink">设置标题5的背景颜色</h5> <p style="background-color: skyblue">设置p的背景颜色</p> <h3>2.设置文字颜色</h3> <p>给标题或者p添加style color:颜色</p> <p>如：style="color:Dodgerskyblue;"</p> <h5 style="color: pink">设置标题5的颜色</h5> <p style="color: skyblue">设置p的颜色</p> <h3>3.设置边框颜色</h3> <p>给标题或者p添加style border:颜色 多少px 粗细！！！注意，必须都要设置这三个，否则不显示边框颜色</p> <p>如：style="border: 2px solid Tomato;"</p> <h5 style="border: 2px solid pink;">设置标题5的颜色</h5> <p style="border: 2px solid skyblue">设置p的颜色</p> <h3>4.设置不同的颜色值</h3> <p>除了预定义的颜色名称外，还可以使用RGB、HEX、HSL甚至使用RGBA或HSLA颜色值的透明颜色来指定颜色</p> <p>如下面几种都是同一种颜色的不同表示：</p> <p>style="background-color:rgb(255, 99, 71);/#ff6347;/hsl(9, 100%, 64%);</p> <p>透明度(第4个参数控制透明度）：style="background-color:rgba(255, 99, 71, 0.5);/hsla(9, 100%, 64%, 0.5);"</p> <h5 style="background-color:rgb(255, 99, 71);">设置标题5的背景颜色rgb(255, 99, 71)</h5> <h5 style="background-color:#ff6347;">设置标题5的背景颜色#ff6347;</h5> <h5 style="background-color:hsl(9, 100%, 64%);">设置标题5的背景颜色hsl(9, 100%, 64%);</h5> <h5 style="background-color:rgba(255, 99, 71, 0.1);">设置标题5的背景颜色透明10% rgba(255, 99, 71, 0.1);</h5> <h5 style="background-color:hsla(9, 100%, 64%, 0.1);">设置标题5的背景颜色透明10% hsla(9, 100%, 64%, 0.1);</h5> <h3>5.RGB、HSL没什么好说的，设置值，十六进制时通过对红、绿和蓝使用相同的值，可获得不同深浅的灰色</h3> <h5 style="background-color:#000000;">背景颜色#000000;</h5> <h5 style="background-color:#3c3c3c;">背景颜色#3c3c3c;</h5> <h5 style="background-color:#f0f0f0;">背景颜色#f0f0f0;</h5> <h5 style="background-color:#ffffff;">背景颜色#ffffff;</h5> <h2>三.背景</h2> <h3>1.设置页面的背景色</h3> <p>设置body添加 background-color:颜色</p> <p>如： body { background-color: lightskyblue; }</p> <h3>2.设置不同元素的背景颜色</h3> <p>给标题或者p添加style background-color:颜色</p> <p>如：style="background-color:Dodgerskyblue;" 或 div { background-color: deepskyblue; }</p> <h5 style="background-color: pink">设置标题5的背景颜色</h5> <p style="background-color: skyblue">设置p的背景颜色</p> <div style="background-color: deepskyblue">设置div的背景颜色</div> <h3>3.将图片设置为背景颜色</h3> <p>设置body添加 background-image: 图片路由;</p> <p>如： body { background-image: url("paper.gif"); //远程图片链接一直不太好使还是什么？ 我的本地图片可以加载成功，远程不行？本体图片刚开始也加载不成功。怎么回事？ GET https://img2020.cnblogs.com/blog/1395550/202109/1395550-20210904230926949-1330773925.png 403 (Forbidden) <p> https://segmentfault.com/q/1010000011752614中搜到的答案： 最后在html中加了 < meta name="referrer" content="no-referrer" />解决了 原理：默认http请求中会带有一个referrer字段，服务器端可以通过referrer值判断请求是否来自本站，若不是则返回403或者重定向返回其他信息，从而实现图片的防盗链。通过添加上面的html，告诉客户端不带这个referrer信息 表现： 在本地页面里用img标签访问页面图片返回403 forbidden。 而浏览器可以直接打开。好像是他们的服务器做了处理。 请问该如何修改。 </p> <p> another answer < img referrerpolicy="no-referrer" /> 有时并不能解决问题； 所以可以 nginx 反向代理图片，配置： location /biliproxy/i0hdslbcom { proxy_pass "http://i0.hdslb.com/"; proxy_set_header Connection "keep-alive"; proxy_set_header Referer "https://www.bilibili.com"; proxy_set_header Host "i0.hdslb.com"; } }</p> <h3>4.将图片设置为第一页背景颜色，以后的不管</h3> <p>设置body添加 background-image: 图片路由; background-repeat: repeat-x; 可以看到只有第一行有图片背景，不再是平铺的了</p> <p>如： body{ background-image: url("https://cdn.pixabay.com/photo/2020/04/22/15/25/stag-5078652_960_720.png"); background-repeat: repeat-x; } }</p> <h3>5.定位背景图像位置</h3> <p>设置body添加 background-image: 图片路由;以及设置background-repea ; background-position ; margin-righ</p> <p>如： body { background-image: url("img_tree.png"); background-repeat: no-repeat; //背景重复： 背景不重复 background-position: right top; // 背景位置：右顶部 margin-right: 300px; // 右边距 } }</p> <h3>6.一个body背景声明中的所有背景属性-简写版？</h3> <p> body { background: #ffffff url("img_tree.png") no-repeat right top; margin-right: 200px; }</p> <p> background 属性是一种速记属性，用于在一个声明中指定所有背景属性。 </p> <h3>7.高级背景示例</h3> <p> body </p> <p>{ margin-left: 600px; background: #5d9ab2 url("img_tree.png") no-repeat top right fixed; } </p> <p> .center_div </p> <p>{ border: 1px solid gray; margin-left: auto; margin-right: auto; 90%; background-color: #d0f0f6; text-align: left; padding: 8px; } }</p> <p> 这个例子包含一些还没有学过的高级 CSS 方法 </p> </div> </body> </html>
效果：
