day 12

Background的综合属性

百分比表示法

百分比表示法两个属性值都是百分比

水平方向100% = （盒子的width）-图片的宽度

垂直方向100%= （盒子的width）-图片的高度

上式仅供参考

以九宫格的方法来帮助记忆

Eg：background-position:100% 0;表示右上角

100% 100%则表示右下角 0 0 表示左上角 50 0表示上中方向

 

 

 

背景附着：background-attachment

作用是设置背景图片是否随着页面滚动而滚走

属性值：

scroll 滚动的 默认值 表示会随页面一起滚动走

 

 

 

fixed

表示的是固定的，表示图片会固定在浏览器的左上顶点，随着页面滚动蹄片会保持状态，不会向下滚动

 

 

 

 

综合属性

关于background六个单独属性组合成一个综合属性

属性值：可以为1~5个，值之间使用空格隔开，顺序可以颠倒

 

 

 

 

 

背景应用

Logo替换文字

前面学过，h1标签通常是制作logo的，目的是为了优化搜索引擎，搜索引擎抓取的是文字而不是logo图片，我们可以利用文字和图片制作该效果

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<style>

    *{

        margin: 0;

        padding: 0;

    }

    h1{

        width: 500px;

        overflow:hidden;

    }

    h1 a{

        display:block;

        height: 58px;

        width: 146px;

        background: url(images/logo.png) no-repeat;

        text-indent:-10em;

    }

</style>

<body>

    <h1>

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

        淘宝网，购物</a>

    </h1>

</body>

</html>

 

 

 

原理：使用背景图片替换文字，文字通过text-indent属性为负值之后出了h1盒子的显示范围，然后h1 overflow：hidden，从而实现了logo替换文字。

 

利用padding制作背景图

 

 

 

 

 

 

原理：将原来ul的默认小黑点使用list-style：none；去掉，然后通过li标签的左padding挤出位子，由于背景是可以在padding中加载的，所以给每一个li标签设置背景图标即可

 

精灵的设置

精灵就是和背景定位反向而驰，背景定位都是图片小，盒子大，如果此时盒子大，图片小会显示局部，我们可以利用这种只显示局部的特点来制作背景精灵

原理：如果需要显示某个位置的图片，在fireworks中设置一个和页面盒子一样大小的切片，然后在目标区域中放置切片，通过获取属性面板的x和y值，整体设置成相反数即可。因为在网页中盒子是不动的，动的是图片，而我们在fireworks测量的时候是图片不动而盒子在动，因此他们是相反数的关系。

 

 

 

 

 

 

背景精灵就是将很多小的icon图片汇集在一起显示，利用网页速度的加载

 

 

 

 

 

定位

定位就是将盒模型按照指定位置加载

相对定位不脱离标准流，绝对定位和固定定位是脱离标准流的

Position：
作用：设置盒子针对某个参考元素进行位置偏移设置

属性值：
relative  相对定位

absolute 绝对定位

fixed    固定定位

如果定位的元素想要发生位置偏移，必须搭配偏移量属性进行设置

水平方向：设置left right

垂直方向：设置top bottom

相对定位

属性值：relative

参考元素：自身盒子的原始位置

需要注意的是：如果设置left：100px；盒子会向右边移动100px，因为他是以左边为基准向右偏移100px

 

 

 

 

相对定位的性质：相对定位元素是不脱离标准流状态的，不会让出原始位置，盒子会在新的指定位置加载

 

需要注意的是：偏移量属性值是有正负之分的。

正数：表示偏移方向和属性名正好相反

负数：表示偏移方向和属性名相同

Eg：

 

 


在水平方向不能同时设置left和right属性，如果同时设置，只会加载left属性，那么垂直方向如果top和bottom同时设置只会加载top属性。简而言之，top和left的权重相对较高。

 

 

 

Attention：使用偏移量的时候，从水平和垂直方向各挑选出一个属性进行组合。

 

相对定位的参考位置是自身元素，此时就会有不同的参考点

Left、top：使用的是偏移之前的左上顶点作为参考点

 

 

 

Left、bottom：使用偏移之前的左下顶点作为参考点

 

 

 

Right、top：使用偏移之前的右上顶点为参考点

 

 

 

Right、bottom：使用偏移之前的右下顶点为参考点

right：100px；

bottom：100px；

 

 

posted @ 2021-03-14 23:47  Viper7  阅读(73)  评论(0)    收藏  举报