前端：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- ...
随机推荐
- java工具包一：日期处理
作者:NiceCui 本文谢绝转载,如需转载需征得作者本人同意,谢谢. 本文链接:http://www.cnblogs.com/NiceCui/p/7846812.html 邮箱:moyi@moyib ...
- Hbuilder Webview调试+逍遥安卓模拟器
软件版本: HBuilder : 9.0.2.201803061935 逍遥安卓:5.2.2 webview相当于一个浏览器的tab,通过在webview中修改,模拟器端会实时刷新效果.从而达到调试手 ...
- document.head.appendChild(element) 在 IE8 及以下报错
问题: 在开发中会遇到动态添加 script 标签的情况. 代码如下: var oScript = document.createElement('script'); oScript.src = 'd ...
- [js常用]页面滚动的顶部,指定位置或底部,平滑滚动
js平滑滚动到顶部.底部.指定地方 <!DOCTYPE html> <html lang="en"> <head> <meta chars ...
- 5月23日——SPA单页面应用的原理
一.什么是SPA(SPA 的概念) 单页 Web 应用 (single-page application 简称为 SPA),简单理解为:仅仅在web页面初始化时加载相应的HTML.JavaScript ...
- 【代码笔记】iOS-屏幕根据键盘自动的变化高度
一,效果图. 二,代码. ViewController.h #import <UIKit/UIKit.h> @interface ViewController : UIViewContro ...
- 前端开发面试题-JavaScript（转载）
本文由 本文的原作者markyun 收集总结. 介绍js的基本数据类型. Undefined.Null.Boolean.Number.String. ECMAScript 2015 新增:Symbol ...
- 【VS2015】Win7 X64上面安装VS2015
环境: 1.Win7 x64 SP1旗舰版 2.VS2015专业版Update3 3.IE11 4.WDK10 5.SDK10 安装步骤: 1.安装IE11,需要如下补丁: a.Windo ...
- SQLServer 学习笔记之超详细基础SQL语句 Part 4
Sqlserver 学习笔记 by:授客 QQ:1033553122 -----------------------接Part 3------------------- 17 带比较运算符的嵌套查询 ...
- Vue -- vue-cli(vue脚手架) npm run build打包优化
这段时间公司新项目立项,开发组选用 Vue2.0 进行开发.当然也就一并用到 vue cli 进行自动化构建.结果在基础版本开发完成后,用 npm run build 命令打包上线时,发现以下几个问题 ...