前端: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- ...
随机推荐
- NIO,AIO,BIO
同步和异步:同步和异步关注的是消息通信机制, 同步:就是在发出一个“调用”时,在没有得到结果之前,该“调用”就不返回,但是一旦调用返回,就得到返回值了;换句话说:就是由“调用者”主动等待“调用”结果 ...
- python学习之老男孩python全栈第九期_day005知识点总结
1. 数据类型划分: (1) 不可变数据类型(可哈希): 元组, bool, int(123 就是123,不会变成其他数), str, 字典的keys (2) 可变数据类型(不可哈希): 列表list ...
- jquery插件-fullpage.js
1⃣️ 简介 fullPage.js 是一个基于 jQuery 的插件,它能够很方便.很轻松的制作出全屏网站,主要功能有: 支持鼠标滚动 支持前进后退和键盘控制 多个回调函数 支持手机.平板触摸事件 ...
- 跨域cors中如何传递cookie(前端为什么无法向后端传递cookie?)
没有跨域 后端server只要在回应头部‘set-cookie’,那么就会有cookie产生并保存在客户端client. 等到client再次向后端server发送请求时浏览器的机制就会自动携带coo ...
- tilestache
pip install tilestache -i https://mirrors.ustc.edu.cn/pypi/web/simple python C:/Python27/ArcGIS10.4/ ...
- ArcGIS基于DEM计算水流方向的方法(D8算法)
ArcGIS采用D8算法计算水流方向(9.3.1后新增),输入数据应首先完成了洼地填充处理: One of the keys to deriving hydrologic characteristic ...
- Retrofit+OKHttp忽略https证书验证
记录这个的原因,是因为很多时候,因为后台配置的证书不正确导致APP访问不到服务器数据,导致影响自身的开发进度.没几行代码,逻辑也清晰,所以下面就直接贴出工具类吧: package huolongluo ...
- python 以单例模式封装logging相关api实现日志打印类
python 以单例模式封装logging相关api实现日志打印类 by:授客QQ:1033553122 测试环境: Python版本:Python 2.7 实现功能: 支持自由配置,如下lo ...
- 腾讯云自建MySQL数据库访问
1. 登陆腾讯云 https://cloud.tencent.com/ 2. 登陆控制台 https://console.cloud.tencent.com/ 3. 选择云主机 4. 选择重装系统 5 ...
- Java 注解用法详解——@SuppressWarnings
转自: https://www.cnblogs.com/fsjohnhuang/p/4040785.html Java魔法堂:注解用法详解——@SuppressWarnings 一.前言 编码时我 ...