web前端day-6css样式2

weixin_52368930

于 2021-04-17 11:07:49 发布

阅读量69

点赞数 1

本文链接：https://blog.csdn.net/weixin_52368930/article/details/115771682

版权

一、css背景
background-color: 设置对象的背景颜色。
• 属性值
transparent：默认值(背景色透明)。
{color}：指定颜色
background-image: 设置对象的背景图像。 • 属性值
none：默认值(无背景图)。
url({url})：使用绝对或相对 url 地址指定背景图像
案例：

<style>
        *{
            padding: 0;
            margin: 0;
        }

        .wrapper{

            background-image: url(img/1.jpg);
                /*background-repeat: no-repeat;*/
                /*background-position: center center;*/
                /*background-attachment: scroll;*/
                /*-webkit-background-size: 100%;*/
                /*background-size: 100%;*/

        }
    </style>
</head>
<body>

<div class="wrapper">
        <p>wqdeqwd</p>
        <p>wqdeqwd</p>
        <p>wqdeqwd</p>
        <p>wqdeqwd</p>
        <p>wqdeqwd</p>
        <p>wqdeqwd</p>
        <p>wqdeqwd</p>
        <p>wqdeqwd</p>
        <p>wqdeqwd</p>
        <p>wqdeqwd</p>
        <p>wqdeqwd</p>
        <p>wqdeqwd</p>
        <p>wqdeqwd</p>
        <p>wqdeqwd</p>
        <p>wqdeqwd</p>
        <p>wqdeqwd</p>
        <p>wqdeqwd</p>
  </div>



</body>

显示效果：在这里插入图片描述
注：图片会重复
取消重复： background-repeat: no-repeat;
全部覆盖： background-repeat: repeat;
x轴重复：background-repeat: repeat-x;
y轴重复：background-repeat: repeat-y;
设置图片格式大小：-webkit-background-size: 100%;
background-size: 100%;
设置对象的背景图像位置 background-position:x,y//
在这里插入图片描述
background-attachment: 设置对象的背景图像滚动位置。 • 属性值
scroll：默认值。背景图像会随着页面其余部分的滚动而移动。
fixed: 当页面的其余部分滚动时，背景图像不会移动。

background 简写属性：在一个声明中设置所有的背景属性。 • 语法
background: color image repeat attachment position
• 示例
body { background: #fff url(’…/images/pic.png’) no-repeat fixed center center }//没有先后顺序之分
超链接：

<style>
        a{
            color:#000;
            text-decoration: none;

        }
        a:visited{  /*被访问的状态*/
            color:red;
        }
        a:hover{  /*鼠标悬停*/
            color:blue;
            text-decoration: underline;
        }
    </style>
</head>
<body>


<a href="http://www.baidu.com">ddd</a>

伪元素：用于向某些选择器设置特殊效果。

:first-letter
:first-letter：向文本的第一个字母添加特殊样式。
<p> hello first-letter </p>
<style>
p:first-letter { color:red; font-size:30px; }
</style>
:first-line
:first-line：向文本的首行添加特殊样式。
<p> hello first-line </p>
<style>
p:first-line { color:red; font-size:30px; }
:before
:before：在元素之前添加内容。
<p> hello before </p>
<style>
p:before { content: 'before content' }
:after
:after：在元素之后添加内容。
<p> hello after </p>
<style>
p:after { content: 'after content' }

显示效果：在这里插入图片描述

weixin_52368930

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web前端day-6css样式2

一、css背景background-color: 设置对象的背景颜色。• 属性值transparent：默认值(背景色透明)。{color}：指定颜色background-image: 设置对象的背景图像。 • 属性值none：默认值(无背景图)。url({url})：使用绝对或相对 url 地址指定背景图像案例：<style> *{ padding: 0; margin: 0; }
复制链接

扫一扫