前端：background 设置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#background_set{
background-color: grey;
width: 800px;
height: 900px;
background-image: url(../picture/.png); /* 默认是平铺*/;
/*background-repeat:no-repeat;*/
/*no-repeat 不重复 repeat-x x轴重复，repeat-y y轴重复 */
/*background-size: 100% 100%;/*背景图片大小设置*/
/*background-position: center center;*/
/* 值分别为x轴和y轴的数值，可以是像素也可以x轴：left、right、cener；y轴:top、center、bottom
默认值：center（值填写一个一直）。
*/
background-repeat: repeat-x;
background-position:center 0px;
/*他会把中间的图片放在x轴的中间，这个比较有用做背景色 数值可以设置正负*/
background-attachment: fixed;
/*背景图片，位置设置，固定还是随着滚轮滑动*/
}
</style>
</head>
<body>
<div id="background_set"></div>
</body>
</html>
以上我们做的设置是单一样式设置，这些都是背景色的设置，我们可以用复合样式来进行对背景色的设置。
复合样式，即用background来设置这些属性：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.background_set{
width: 800px;
height: 1500px;
background: grey url(../picture/.jpg) no-repeat center fixed;
}
</style>
</head>
<body>
<div class="background_set">
<br/>
<br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/>
</div>
</body>
</html>
其中，对于属性background-attachment 属性的解释：如下
前端：background 设置的更多相关文章
- background 设置文本框背景图
background 属性的作用是给元素设置背景,它是一个复合属性,常用的子属性如下: background-color 指定元素的背景颜色. background-image 指定元素的背景图像. ...
- 前端imageBuffer设置图片src（后端返回二进制流图片）
参考地址1:前端imageBuffer设置图片src(后端到前端直传buffer) 参考地址2:axios根据流生成图片 本质为buffer转base64 // 获取项目截图 getItemPic() ...
- CSS 常用 background 设置
CSS 背景图片设置: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> & ...
- 前端web设置div宽高一样
<div class="constant-width-to-height-ratio"></div> .constant-width-to-height-r ...
- 前端imageBuffer设置图片src(后端到前端直传buffer)
本质为buffer转base64 let bytes = new Uint8Array(imageBuffer.data); let data = ""; let len = by ...
- 前端jq设置下拉框的，单选框，复选框的帖子
$(function(){ var sex=$("#sex").val(); var marriageStatus=$("#marriageStatus").v ...
- django websocket 实现后台日志在web端展示（+前端vue设置）
核心代码: @accept_websocket def get_log(req): if req.is_websocket(): print('收到websocket请求') with open(se ...
- 前端优化-Img与background
当img 遇到 background,这个世界就是这么小~~~~~ 1 从解析机制看 Img属于html标签,background是css方法.一个页面由html.css.js组成,按照浏览器解析机制 ...
- Img与background的区别
今天做项目中,用background显示了二维码和一些文字,但显示到页面上时,二维码和图片都变得模糊了.于是将图片调整.放大,但在放大后,作为背景图片的它则显示不全,无奈之下用了backgroung- ...
随机推荐
- django使用小贴士
问题一: RuntimeError: Model class user.models.UserAccount doesn't declare an explicit app_label 解决方案 方案 ...
- grafana启用mysql作为的后台数据库
vim grafana-5.4.2/conf/defaults.ini grafana默认使用sqlite3使用后台数据库,可选用mysql,postgres,sqlite3. 重新启动 注意: gr ...
- List中Add()与AddAll()的区别
我们在开发过程中经常会使用到List<Object> list=new ArrrayList<>(); 这个集合,Object 也可以是String.Integer等. 当我们 ...
- java中System.currentTimeMillis()
System.curentTimeMillis();会产生一个当前的毫秒. 1.计算某个方法的耗时 long curTime = System.currentTimeMillis(); resourc ...
- JS截取字符串方法实例
// JS截取字符串可使用 substring()或者slice() // // 函数:substring() // 定义:substring(start,end)表示从start到end之间的字符串 ...
- Asp.net MVC检测到有潜在危险的 Request.Form 值
解决方法很简单,不像网上说的那么麻烦.只需一步: [ValidateInput(false)] public ActionResult Test(){ }
- 【Redis】Redis学习（三） Redis 主从模式详解
不管任何程序,只运行一个实例都是不可靠的,一旦因为网络原因导致所在机器不可达,或者所在服务器挂掉,那么这个程序将不能对外提供服务了,Redis也是一样的.不过Redis的主从并不是解决这个问题的,一些 ...
- 【转】设置Qt应用程序图标及应用程序名
一直以来很纠结给qt应用程序添加图标问题,在网上收过一次,但是感觉不够完整,现将自己的实现过程记录下,以便以后查看: 通过网上的例子知道qt助手中有相关说明: Setting the Applicat ...
- 《Javascript权威指南-第6版》
第3章 类型.值和变量 3.2 文本 3.2.1 字符串直接量 建议:在javascript中使用单引号表示字符串,在HTML中使用双引号表示字符串; 3.2.2 转义字符 \n 换行符 \r 回车符 ...
- Jenkins 执行python脚本
操作很简单: * 最新版本的Jenkins,插件管理中下载两个python需要的插: * 重启Jenkins 任务中添加python脚本即可,点击保存时候,自动会在下图中目录生成.py文件 过程如下 ...