html+css-->background-img(背景图的设置)
背景图:(相关验证代码请查看代码,在验证时需将当前不需要验证的代码注释掉)
1.inherit:从父元素继承属性设置
2.background-repeat:平铺(在图片大小小于元素尺寸时背景图默认平铺):
no-repeat:取消默认平铺
repeat-x:横向平铺
repeat-y:纵向平铺
3.background-size:尺寸
px、百分比:依旧默认平铺元素
cover:等比放大覆盖元素
contain:等比放大,直到图片的一边达到元素的边框
4.background-attachment:固定
scroll:图片随滚动条滚动而上下移动
fixed:图片固定在元素中不会随滚动条移动
----由于需要动态设置可以查看代码自己试验
5.background-position:定位
方式1:
(+:取值为正 单位:px)
x:水平偏移 + 右边 -左边
y:垂直偏移 + 下 -上
----background-position:25px 50px;
方式2:
(以元素边框的左右为基准)
x left right center
y top bottom center
----background-position:left top;
----background-position:center;
(需要注意一点的是,除了设置背景图的固定以外,在设置背景图片的尺寸与定位时,若不取消图片的默认平铺,此时依然会对元素进行背景平铺)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>背景图</title>
<!-- 背景图:
1.inherit:从父元素继承属性设置
2.background-repeat:平铺(在图片大小小于元素尺寸时背景图默认平铺):
no-repeat:取消默认平铺
repeat-x:横向平铺
repeat-y:纵向平铺
3.background-size:尺寸
px、百分比:依旧默认平铺元素
cover:等比放大覆盖元素
contain:等比放大,知道图片的一边达到元素的边框
4.background-attachment:固定
scroll:图片随滚动条滚动而上下移动
fixed:图片固定在元素中不会随滚动条移动
5.background-position:定位
方式1:
(+:取值为正 单位:px)
x:水平偏移 + 右边 -左边
y:垂直偏移 + 下 -上
方式2:
(以元素边框的左右为基准)
x left right center
y top bottom center
-->
<style>
.boxrepeat,.boxsize,.boxattachment,.boxposition{
width: 300px;
height: 400px;
border: 1px solid #000000;
/* 图片可更改 */
background-image: url(img/shoucang.png);
/*从父元素继承属性的设置*/
background-repeat-x:inherit;
}
.boxrepeat{
/*取消默认平铺*/
background-repeat: no-repeat;
/* 横向平铺 */
background-repeat: repeat-x;
/* 纵向平铺 */
background-repeat: repeat-y; }
.boxsize{
/*背景图片的尺寸:px、百分比--依旧会默认平铺元素*/
background-size: 30px;
background-size: 50%;
/*图片的覆盖cover--等比放大覆盖整个元素*/
background-size: cover;
/*背景图片的包含contain--在取消默认平铺的情况下,将图片等比放大直到图片的一边到达元素的边框*/
background-repeat: no-repeat;
background-size: contain;
}
.boxattachment{
/*图片的固定--scroll:随着页面其余部分的的滚动而移动*/
background-attachment: scroll;
/*图片的固定--fixed背景不会随着滚轮移动 但是元素会移动并且对图片进行一部分的覆盖*/
background-attachment: fixed;
}
.boxposition{
/*背景图片的定位--x:left y:top 位于左边顶部*/
background-repeat: no-repeat;
/* background-position: left top; */
/*背景图片的定位--x:25px y:50px 向右偏移25px 向下偏移50px*/
background-position:25px 50px;
background-position: right bottom ;
/*背景图片的定位--center 居中*/
background-position: center;
}
</style>
</head>
<body>
<div class="boxrepeat"></div>
<div class="boxsize"></div>
<div class="boxattachment"></div>
<div class="boxposition"></div>
</body>
</html>
html+css-->background-img(背景图的设置)的更多相关文章
- DIV+CSS+PS实现背景图的三层嵌套以及背景图的合并
传说中的“三层嵌套技术”. 一.背景图合并: div+css+ps合图相结合的技术:通过精确到1px的css设置,使用ps合成背景图片,特别是小图片合并,来完成页面效果. 首先讲讲三层 ...
- css — 定位、背景图、水平垂直居中
目录 1. 定位 2. 背景图 3. 水平垂直居中 1. 定位 position:static | relative | absolute | fixed; static 静态定位 relative ...
- 前端学习笔记系列一:15vscode汉化、快速复制行、网页背景图有效设置、 dl~dt~dd标签使用
ctrl+shift+p,调出configure display language,选择en或zh,若没有则选择安装使用其它语言,则直接呼出扩展程序搜索界面,选择,然后安装,重启即可. shift+a ...
- webpack中,css中打包背景图,路径报错
css-loader: //打包样式中背景图 { test: /\.(png|jpg)$/, loader: "url-loader?limit=8192&name=images/[ ...
- 齐博x1背景图如何设置标签
背景图非常特殊,由于不能点击,所以他不能直接添加标签,需要添加一个辅助标签,比如类似下面的代码 {qb:hy name="xxa001" type="image" ...
- vue-cli构建的vue项目打包后css引入的背景图路径不对的问题
使用vue-cli构建vue项目后,再打包遇到一个css引入的背景图片路径的问题,就是css代码中背景图片是根据相对路径来写的,如下图: 当使用npm run dev命令本地访问的时候,背景图片是正常 ...
- HTML引用CSS实现自适应背景图
链接图片背景代码 body {background: url('链接') no-repeat center 0;} 颜色代码 body{background:#FFF} 链接图片背景代码2 <b ...
- background:url() 背景图不显示
奇怪的问题: .box-3 { width: 100%; height: 500px; border: solid 2px red; margin-top: 70px; padding: 0 0 0 ...
- css中background-image背景图片路径设置
web项目中经常会用到background-image:url(),很多小伙伴不知道该怎么写需要的图片路径. 在此之前先要知道几个重要的东东: / 项目根目录 这个不用多说,就是程序 ...
随机推荐
- Window文件目录遍历 和 WIN32_FIND_DATA 结构(非常详细的中文注释)
第一部分 *百度百科提供的内容总结:WIN32_FIND_DAT 第二部分 *程序实例 第三部分 *一篇使用FindFirstFile和FindNextFile函数的博文 第一部分 ...
- 青云QingCloud黄允松:最高效的研发管理就是没有管理
摘要: 对于底层技术创新而言,没有管理是最好的管理,小规模作战,快速试错,迅速转变方向,迭代周期一定要短. 钛媒体注:钛媒体.商业价值联合主办的第五届“MIIC移动互联网创新大会”如期举行.2015 ...
- Qt多线程学习-用例子来理解多线程
文章出处:DIY部落(http://www.diybl.com/course/3_program/c/c_js/20090303/157373_3.html) POINT 1:QThread类的实例与 ...
- C++的类型转换:static_cast、dynamic_cast、reinterpret_cast和const_cast(dynamic_cast还支持交叉转换,const_cast将一个类的const、volatile以及__unaligned属性去掉)
在C++中,存在类型转换,通常意味着存在缺陷(并非绝对).所以,对于类型转换,有如下几个原则:(1)尽量避免类型转换,包括隐式的类型转换(2)如果需要类型转换,尽量使用显式的类型转换,在编译期间转换( ...
- TCP打洞和UDP打洞的区别 (相互直接访问)
为什么网上讲到的P2P打洞基本上都是基于UDP协议的打洞?难道TCP不可能打洞?还是TCP打洞难于实现? 假设现在有内网客户端A和内网客户端B,有公网服务端S. 如果A和B想要进行UD ...
- 最近公共祖先(least common ancestors algorithm)
lca问题是最近公共祖先问题,一般是针对树结构的.现在有两种方法来解决这样的问题 1. On-line algorithm 用比较长的时间做预处理.然后对每次询问进行回答. 思路:对于一棵树中的两个节 ...
- uni-app中Vuex的引用
//store 中 store.js import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const store = new Vue ...
- js&jq遇到的问题(不断更新中)
1.普通事件和事件绑定: 代码: 普通事件: var btn=document.getElementById('btn'); btn.onclick=function(){ alert("c ...
- python自动化测试之mysql5.0版本数据库查询数据时出现乱码问题分析
1.确保数据库编码是utf8编码.若不是,请将my.ini的client,mysql,mysqld三个字段下面添加default-character-set = utf8,这样可以永久改变在新建数据库 ...
- U盘刻录kali linux启动盘提示找不到镜像解决方案
选择“继续”后会来到步骤菜单,选择从shell启动,命令 df -m 查看当前磁盘挂载情况,看到 /media 目录 输入命令 umount /media 进行挂载然后输入 exit 退出