当前位置:首页 » php学习笔记 » css-background常见的属性

css-background常见的属性

原创 stpevenchow 13°c 2019年10月16日 23:49 php学习笔记 0条评论
  移步手机端

1、打开你手机的二维码扫描APP
2、扫描左则的二维码
3、点击扫描获得的网址
4、可以在手机端阅读此文章

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>css常见的属性</title>
    <style type="text/css">
        .div1{
            width: 100px;
            height: 100px;
            background-color: pink;
        }
        .div2{
            width: 400px;
            height: 400px;
            color: red;
            background-color: orange;
            background-image: url("../aoshuang.png");
        }
        .div3{
            width: 400px;
            height: 400px;
            color: red;
            background-color: orange;
            background-image: url("../aoshuang.png");
            background-repeat: no-repeat;
        }
        .div4{
            width: 400px;
            height: 400px;
            color: red;
            background-color: orange;
            background-image: url("../aoshuang.png");
            /* background-repeat: no-repeat; */
            background-position: left 100px;
            background-size: 160px 160px;
        }
    </style>
</head>
<body>
    <!-- background 属性
        background-color---背景颜色
        background-image---背景图片
        background-repeat---背景图片平埔
        background-position---背景图片定位
        background-size---背景图片大小
    -->
    <!-- 背景
    background-color:背景颜色
        注意:不管是背景颜色还是背景图片,一定是显示在内容之后,会被内容遮挡
    -->
    <div class="div1">每天感觉自己都在进步</div>
    <!-- 背景图片
    背景图片显示在内容之下,显示在背景颜色之上,默认是从左上角开始平埔显示
    -->
    <div class="div2">背景图片</div>
    <!-- 背景图片平埔设定 background-repeat
        no-repeat:不平埔
            repeat-x:X轴平埔
            repeat-y:Y轴平埔
            图片平埔是从图片的原始位置开始,图片默认原始位置在元素的左上角
    -->
    <div class="div3">背景图片平埔效果</div>
    <!-- 图片定位 background-position
    背景图片默认出现在元素的左上角,可以设定背景图片的位置,背景图片定位特点:x轴,y轴,如果只设定一个方向的定位,另一个方向的定位会自动居中
    属性值  2种形式
    1,英文单词
    top bottom y轴方向定位
    left right x轴方向定位
    center     居中定位
     -->
     <div class="div4">图片定位</div>
     <!-- 2,数值形式
    设定两个数值作为定位属性值
    第一个数值 x轴定位属性值
    第二个数值 y轴定位属性值
        如果只写一个数值为x轴定位属性值,则y轴居中,如果x轴属性值为width的值得一半,则图片居中;同理只写一个y轴一样得效果,只是写Y轴得时候x属性值必须写0px,x轴也可以用英文表示
     -->
     <!-- 背景图片的大小 background-size
        写1个属性值图片的宽,设置一个属性图片会等比例缩放
        写2个属性值图片的宽、高
     -->
</body>
</html>

欢迎阅读本文,如果本文对您有所帮助,记得收藏/转发☺

本文链接:http://stpeven.com/post/140.html

版权声明:本文为原创文章,版权归 stpevenchow 所有,欢迎分享本文,转载请保留出处!

本文标签:

三人行,必有我师

评论(0)

发表评论:


【顶】 【踩】 【好】 【懵】 【赞】 【表情】

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

推荐阅读
11月12日

php--最大储存数值常量,进制

发布 : | 分类 : php学习笔记 | 评论 : 0人 | 浏览 : 1次
php--最大储存数值常量,进制

<?phpphp最大储存数值常量echo PHP_INT_MAX;echo '<br>';php最小储存数值常量echo PHP_INT_MIN;原理:64位操作系统,理论上可以存储的最大数值为2的64次方php程序中,将第一位用作存储整数的正负实际存储数值变为2的63次方式0作为特殊的数值,单独占据正数的存储数值最大正整数2的63次方 - 1 - 1用于存储0最小负整数负的2的63次方整型(int) 的溢出大于最大值,或者小于最小值数据类型会变为浮点型,显示方...

标签 :
11月11日

php--变量的赋值顺序

发布 : | 分类 : php学习笔记 | 评论 : 0人 | 浏览 : 5次
php--变量的赋值顺序

    php的变量赋值顺序,这是之前在千峰上面没有学习过的,今天在达内里面有讲到,就补充一下    <?php// 变量的声明和赋值同时进行 php是一门弱类型的计算机语言// $int = 100;// 重复赋值//// 对一个变量进行重复赋值,之后赋值的数据会覆盖之前存储的数据// $int = 100;// $int = 200;// echo $int;// 连续赋值 是同时给多个变量赋值//// 并...

标签 :
11月10日

css---网站栏目小图标

发布 : | 分类 : php学习笔记 | 评论 : 0人 | 浏览 : 12次
css---网站栏目小图标

    一般我们在前端都会看到各式各样的小图标,他们是怎么实现的呢?可以用ps裁剪,也可以用代码去实现,如下图所示        利用宽高,以及background标签的部分属性,来实现了套图,变成单个图片的形式下面是代码    <!DOCTYPE html><html><head> &nbs...

标签 :
11月09日

css---悬停光标变形

发布 : | 分类 : php学习笔记 | 评论 : 0人 | 浏览 : 13次
css---悬停光标变形

    大多时候肥宅们在浏览二次元网站的时候,很多时候会发现鼠标悬停在某些标题或者栏目的时候,鼠标样式会发生改变,肥宅往往会惊讶程序员的神奇之处,但是并不知其原理,以前我也不知道但是学了伪类选择器hover过后,董其原理,今天学习了cursor属性过后知道其根本,下面就看演示效果把。        下面附上代码,以及注意事项    <...

标签 :
11月08日

css-滑动效果

发布 : | 分类 : php学习笔记 | 评论 : 0人 | 浏览 : 10次
css-滑动效果

    主要运用到overflow-y:scroll以及昨天学习到的white-space:nowrap静止换行,overflow:hidden超出隐藏,text-overflow:ellipsis超出部分变为省略号    <!DOCTYPE html><html><head>    <meta charset="UTF-8">&...

标签 :