html 背景不填充,CSS之背景的填充范围
1.资料:CSS2.1 进行了更正:元素的背景是内容、内边距和边框区的背景
2.也就是说背景颜色,background-color:这些会填充内边距和边框border, 而不会填充外边框margin的部分
3.CSS背景图片的填充范围和填充位置
3.1 如果不设置repeat属性的话,默认会图片重复的方式填充整个元素内容+padding部分(margin不包括)
3.2 如果设置了background-position的话,比如 top right(右上) 也就是img会顶到右上角的padding最边部
image
3.3 让背景图片居中,尽量用background-posintion:center,不要用百分比50% 50%
**PS:这会导致图像适当放置,其中心与其元素的中心对齐。换句话说,百分数值同时应用于元素和图像。也就是说,图像中描述为 50% 50% 的点(中心点)与元素中描述为 50% 50% 的点(中心点)对齐。**
3.4 具体的调整背景图片的位置,可以用position配合 具体的数值单位,比如px这些 (方法是第一个参数为 右,第二个为下)
比如,如果设置值为 50px 100px,图像的左上角将在元素内边距区左上角向右 50 像素、向下 100 像素的位置上:
body
{
background-image:url('/i/eg_bg_03.gif');
background-repeat:no-repeat;
background-position:50px 100px;
}
3.5 背景图片和scroll滑动框的自适应
background-attachment:fixed
html 背景不填充,CSS之背景的填充范围相关推荐
- css怎么分开背景图片,css切背景图片(background-position)
给元素添加背景图片的方式有很多,个人总结的有: 用img插入图片: css3的方式手动绘图: 单独用background-image单独插入图片: 其中用background-image有两种方法,一 ...
- php怎么加css和背景图,css的背景图怎么加边框
css背景图加边框的方法:首先创建一个HTML示例文件:然后通过"background-image"引入一张背景图:最后通过border属性设置边框即可. 本文操作环境:windo ...
- html+页面的背景透明,css设置背景透明 元素不透明
css设置背景透明 元素不透明 在做前端页面的时候,我们会遇到这样的情况,需要背景为半透明状态,但是层里面的内容不需要为透明的状态.有时候我们设置的时候会出现不管内容还是背景同时都成透明了,如何实现背 ...
- html怎样调节背景透明度,css设置背景透明度的方法是什么
css设置背景透明度的方法是什么 发布时间:2020-09-01 15:43:28 来源:亿速云 阅读:83 作者:小新 这篇文章将为大家详细讲解有关css设置背景透明度的方法是什么,小编觉得挺实用的 ...
- css设置背景透明度,css设置背景透明度 你需要学习了
css通过设置透明度可以得到遮罩效果,今天咪咪我就来给大家讲解一下css透明度的设置方法. 工具/材料 电脑 webstorm 操作方法 01 如图,打开webstorm,然后新建一个html界面,在 ...
- 移动端css背景设置,css设置背景虚化,vue移动端登录页
先看结果: 1.需要设置两个并列的div,第一个div代表背景部分,第二个div表示内容主体.如下: 代码如下: 欢迎登录 登录 2.两个div的css样式如下: 代码如下: .bg-blur { b ...
- css 裁剪背景图片,CSS裁剪背景图片的歪招
标题的背景图片.png 背景图片左右不对称怎么办?(ㄒoㄒ)此处由于其他限制不能裁剪并使用绝对定位. [语法] ①background-clip 属性规定背景的绘制区域. 默认值:border-box ...
- html设置流星动态背景,纯CSS流星雨背景
插件预览图 使用教程 代码展示 vue页面使用 Style .space { width: 100%; height: 100vh; background: #121212; overflow: hi ...
- html背景图片内填充,CSS基础——使用图片填充元素背景
在网页设计中,使用图片来填充元素背景,可以让元素背景呈现丰富多彩的外观.使用图片填充元素背景的常用样式标签有background-image.background-repeat.background- ...
最新文章
- java post接口测试_接口测试——Java + TestNG 国家气象局接口(json解析)实例
- Agile PLM Item Title Block Tab
- vscode如何及时提示flutter代码
- 苹果CMS的V10版本后台登录一直提示验证码错误的解决方案
- python函数-装饰器
- 《revolution in the valley》读后随笔--Steve jobs与Macintosh
- 【Level 08】U05 Better option L6 Informative posts
- linux服务器拓扑图,Linux服务器作为网关的DNS分离解析服务(CentOS 7版本)
- 采用HTML5搭建的多个网站尝鲜试用
- 使用国内源来安装pytorch(速度很快)
- Spring 的 init-method 和 destory-method
- 实用工具,可以生成dal层的相关cs代码
- 根据不同条件查询_好用的大数据即席查询工具——秒级响应
- [强化学习实战]深度Q学习-DQN算法原理
- Qt中通过Qpixmap设置图片透明度
- stm32f103c6t6
- 苹果上传闪退 php,苹果手机app频繁闪退原因以及解决方法
- jmeter性能测试--对MQTT服务做压力测试
- 人工智能——归结推理
- GoLang之Map深度讲解
热门文章
- 使用记账软件记录生活收支明细,如何防止收支不被他人修改
- 海航金鹿公务机队规模稳居亚太之首;奥森多生物科技创新中心在沪揭牌 | 美通企业日报...
- java 树形图_java实现树状图
- 王慧文:当下社会最稀缺的是“π型人才”
- 星星之火-36:LTE载波载波的间隔是15K, 载波波的带宽是多少? 15K还是30K?
- [2016ACM多校] HDU5784 极角序 正难则反
- 触摸!天空龙 - 锻炼极速反应力
- java map 队列_JavaSE-List/Map/Queue
- Wireshark-----抓包分析
- Linux之安装Nginx(安装包方式)