HTML连载79-背景图片定位区域属性、背景颜色

一、这一节讲解的是背景图片开始的位置也是可以设置的:

background-orgin:数值值;

这里的属性值就是开始的位置,可分为:

padding-left(默认);content-box;border-box

    <style>

        *{

            margin:0;

            padding;0;

        }

        ul li{

            list-style: none;

            float:left;

            width: 200px;

            height: 200px;

            text-align:center;

            line-height:100px;

            border:10px dashed black;

            margin-left: 20px;

            background:url("image/mountain.jpg") no-repeat;

        }

        ul li:nth-child(2){

            background-origin: padding-box;/*背景图片默认从什么区域开始显示,默认就是从padding区域开始显示*/

        }

        ul li:nth-child(3){

            background-origin: border-box;

        }

        ul li:nth-child(4){

            background-origin: content-box;

        }

...............省略代码............

<ul>

    <li>默认</li>

    <li>padding</li>

    <li>border</li>

    <li>content</li>

二、背景绘制区域属性

与刚才的背景图片绘制区域定位类似,我们只需要修改一个属性就可以达到定位背景颜色的目的

backgroud-clip:数值值;

这里的属性值就是开始的位置,可分为:


padding-left(默认);content-box;border-box

    <style>

        *{

            margin:0;

            padding;0;

        }

        ul li{

            list-style: none;

            float:left;

            width: 200px;

            height: 200px;

            text-align:center;

            line-height:200px;

            border:10px dashed black;

            margin-left: 20px;

            background:url("image/mountain.jpg") no-repeat;

            background-color:red;

        }

        ul li:nth-child(2){

            background-origin: padding-box;/*背景图片默认从什么区域开始显示,默认就是从padding区域开始显示*/

            background-clip:padding-box;/*背景绘制区域的属性是专门用于制定从哪个区域开始绘制背景的,默认情况下就是从

            border区域开始绘制*/

        }

        ul li:nth-child(3){

            background-origin: border-box;

            background-clip:border-box;

        }

        ul li:nth-child(4){

            background-origin: content-box;

            background-clip:content-box;

        }

</style>

</head>

<body>

<ul>

    <li>默认</li>

    <li>padding</li>

    <li>border</li>

    <li>content</li>

</ul>

三、源码:

D190_BackgroundImageLocation.html

D191_BackgroudDrawingAttribute.html

D192_MoreBackgroundImage.html

地址:

https://github.com/ruigege66/HTML_learning/blob/master/D190_BackgroundImageLocation.html

https://github.com/ruigege66/HTML_learning/blob/master/D191_BackgroudDrawingAttribute.html

https://github.com/ruigege66/HTML_learning/blob/master/D192_MoreBackgroundImage.html

2.CSDN:https://blog.csdn.net/weixin_44630050

3.博客园:https://www.cnblogs.com/ruigege0000/

4.欢迎关注微信公众号:傅里叶变换,个人账号,仅用于技术交流,后台回复“礼包”获取Java大数据学习视频礼包

原文地址:https://www.cnblogs.com/ruigege0000/p/12609818.html

时间: 2024-11-07 14:13:08

HTML连载79-背景图片定位区域属性、背景颜色的相关文章

背景图片定位

 背景图片定位(background-position)原理 A. 语法:Background-position:水平位置 垂直位置 B. 水平位置/垂直位置设置方法: 1) 数值(px)正负值都可以,正数值表示向右移动或向下移动,负数值表示向左或向上移动: 2) 百分比(%)范围:0%-100% 3) 关键词:水平位置:left(左) center(中) right(右) 垂直位置:top(上) center(中) bottom(下) 默认情况下,background-position的原点位

CSS常用背景图片定位方法

CSS背景图片定位其实对于每一位学习前端的同学来说,都已经非常熟悉了.网上铺天盖地的最常见的一种方案就是在父元素中relative,然后子元素absolute.这种方案当然好,不过带来的一个缺点就是会改变元素的层级关系,如果在多个地方使用,这样的层叠嵌套的关系会十分混乱. 先暂时抛弃那种方案,给大家分享几种CSS背景图片定位的方案. 整篇文章会按照如下思路: 1.无依赖的absolute定位 2.background-position扩展语法 3.background-origin定位 4.ca

css 背景图片定位方法

CSS背景图片定位其实对于每一位学习前端的同学来说,都已经非常熟悉了.网上铺天盖地的最常见的一种方案就是在父元素中relative,然后子元素absolute.这种方案当然好,不过带来的一个缺点就是会改变元素的层级关系,如果在多个地方使用,这样的层叠嵌套的关系会十分混乱. 先暂时抛弃那种方案,给大家分享几种CSS背景图片定位的方案. 整篇文章会按照如下思路: 1.无依赖的absolute定位 2.background-position扩展语法 3.background-origin定位 4.ca

CSS背景图片定位

原文:CSS背景图片定位 在网页开发中我们经常需要对图片进行分割(如下图)来使用,而不是分别提供单独的图片来调用,常见的如页面背景,按钮图标等,这样做的好处就是减少请求次数,节省时间和带宽. 对背景图片的定位就需要用到CSS中的background样式,如: div{ background-image: url("1234.png"); background-repeat: no-repeat; background-position: 0px -100px; } 属性解释: back

CSS Sprites 网页背景图片定位技术简述

很多时候我们打开一些网站的背景图片会发现是很多图标集合的一张完整的图片.这种网页使用的就是CSS Sprite,通过将多个图标整合在同一张图片,可以减少向服务器请求图片的次数,加快网页的加载速度. CSS Sprites在国内很多人叫css精灵,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢慢显示出来了.对于当前网络流行的速度而言,不高于200KB的单张图片的所需载入时间基本是差不多的,所以

CSS Sprites技术(将背景图整合到一张图中,再利用CSS背景图片定位到要显示的位置)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Typ

分享几种CSS背景图片定位的方法

由于观测指标间存在相关性,将导致信息的重叠与低效,我们倾向于用少量的.尽可能多能反映原特征的新特征来替代他们,主成分分析因此产生.主成分分析可以看成是高维空间通过旋转坐标系找到最佳投影(几何上),生成新维度,其中新坐标轴每一个维度都是原维度的线性组合θ′Xθ′X(数学上),满足: 如果存在这么严重的问题,网络上应该早就有人遇到了.但实际上没有一个人提出类似的问题,并且我们使用的 jQuery 也是最新版:v1.12.4 为了避免 FineUIPro 的客户端 JavaScript 的影响,我们把

CSS 中背景图片定位方法

三种: 关键字:background-position: top left; 像素:background-position: 0px 0px; 百分比:background-position: 0% 0%; 区别:前两种定位将背景图片左上角的原点放置在指定位置:第三种方式将图片本身的点(x%,y%)与背景区域的点(x%,y%)重合. 使用百分比设置的主要优势在于,当页面缩放的时候,背景图片也会跟着一起缩放.

移动端适配之雪碧图(sprite)背景图片定位

为了减少网络请求个数量,提高网站的访问速度,我们一般都会把一些小的图片合并成一张sprite图,然后根据background-position来进行定位.在web端由于是固定的大小与left .top,所以定位起来会比较准确.简单.但是在移动端就不一样了,各种手机的屏幕大小不一样,很难做到使用sprite图然后根据background-position来定位.所以普遍的做法都是使用单张图片,然后使用background-size: cover|100%|contain来控制背景图的大小.其实这样