CSS常见手艺,遁地风暴

By admin in 4858美高梅 on 2019年4月22日

(-一)写在后面

     
作者用的是chrome4九,那篇是为持续做妄图。主要性的调度以及结束学业资料的完整导致近来没看JQuery和H五特效,今后只可以中午看了。

(-1)写在目前

     
笔者用的是chrome4九,那篇是为承袭做盘算。主要性的调动以及毕业资料的总体导致目前没看JQuery和H伍特效,以后只可以午夜看了。

css-单位%号-background-size-background-position-遁地暴风,遁地龙卷风

一.CSS Coca Cola(百事可乐图|Smart图)指什么? 有如何成效

CSSCoca Cola图是指将网址上的Logo合成在一张图纸上,用background-position的章程加以利用,以减掉页面请求的数据,使页面加载更敏捷。

(0)准备

div长度宽度都为300px,我们一张大小小于div的图形1.jpg为例,将壹.jpg设置为背景图片,增多样式background-repeat:no-repeat

(0)准备

div长度宽度都为300px,我们一张大小小于div的图样一.jpg为例,将一.jpg设置为背景图片,增加样式background-repeat:no-repeat

(-壹)写在前面

     
作者用的是chrome4九,那篇是为承继做打算。主要性的调动以及结束学业资料的欧洲经济共同体导致近来没看JQuery和H5特效,今后只好上午看了。

二.img标签和CSS背景使用图片在运用情形上有什么不一样?

CSS背景图常用于页面上不改变的始末,而当页面上的图样内容须求平时改换依然有链接功效时使用img标签。

(1) background-size:100% 100%;

缩放背景图片大小, background-size:百分百百分百;中的%号的基值分别是div宽度和惊人,所以图片会填充整个div。

(1) background-size:100% 100%;

缩放背景图片大小, background-size:百分百百分之百;中的%号的基值分别是div宽度和惊人,所以图片会填充整个div。

(0)准备

div长度宽度都为300px,我们一张大小小于div的图纸1.jpg为例,将一.jpg设置为背景图片,增加样式background-repeat:no-repeat

3.titlealt个性分别有怎么着成效?

alt是当内容不能加载时体现的代表文本,title是当鼠标移动到超链接上时的印证文本。

4858美高梅 1

Paste_Image.png

(2) background-position:0% 10%;

background-position的值是%号时,基值分别是图片和div水平、中度差的绝对化值,那里已垂直为例,只比方正值。

(2) background-position:0% 10%;

background-position的值是%号时,基值分别是图形和div水平、中度差的相对值,那里已垂直为例,只比如正值。

(1) background-size:100% 100%;

缩放背景图片大小, background-size:百分百百分百;中的%号的基值分别是div宽度和可观,所以图片会填充整个div。

4.background: url(abc.png) 0 0 no-repeat;那句话是什么样看头?

安装背景图片地址为abc.png,x轴方向偏移0,y轴方向偏移为0,不重复。

a.图片未有div大  

background-size:百分百 十分八;那么background-position:0%
十分之一的职能是使图片距div上边陆px,计算办法为(300-300*0.8)*0.壹=陆,相当于往下推图片,所以background-position:0%
百分百;总是是图表底部紧贴div底边

a.图片未有div大  

background-size:百分之百 十分之八;那么background-position:0%
一成的职能是使图片距div下边六px,总计方法为(300-300*0.8)*0.1=陆,也正是往下推图片,所以background-position:0%
百分百;总是是图形尾部紧贴div底边

(2) background-position:0% 10%;

background-position的值是%号时,基值分别是图形和div水平、中度差的相对值,那里已垂直为例,只比如正值。

5.background-size有啥样作用? 包容性怎样? 常用的值是?

  • background-size负有调解背景图片大小的意义。
  • background-size的包容性如下图:

4858美高梅 2

Paste_Image.png

*常用值:(举例中图纸原本大小为5玖伍px449px)\

b.图片和div一样大

4858美高梅 ,background-size:百分百 百分百;这里无论background-position:0%
百分之十;中的百分之十安装为何都未曾成效。

b.图片和div一样大

background-size:百分之百 百分百;那里无论background-position:0%
一成;中的1/10安装为啥都不曾意义。

a.图片未有div大  

background-size:百分百 十分之八;那么background-position:0%
百分之十的法力是使图片距div上面六px,总结格局为(300-300*0.8)*0.1=6,相当于往下推图片,所以background-position:0%
百分百;总是是图片尾部紧贴div底边

background-size:300px 100px,使背景图片长度宽度分别为300px和100px。

<!DOCTYPE html>
<html>
<head>
<title>background-size</title>
<style type=”text/css”>
.div1 {
background:url(image/cat.jpg) 0 0 no-repeat;
width:650px;
height:300px;
border:1px solid #000;
background-color:#ccc;
background-size:300px 100px;
}
</style>
</head>
<body>
<div class=”div1″></div>
</body>
</html>

 ![Paste_Image.png](http://upload-images.jianshu.io/upload_images/2198142-e980262694d37ddd.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)


- ```background-size:30% 50%```,使图片长宽分别为父元素长宽的30%和50%。
- ```
<!DOCTYPE html>
<html>
<head>
    <title>background-size</title>
    <style type="text/css">
        .div1 {
        background:url(image/cat.jpg) 0 0 no-repeat;
        width:650px;
        height:300px;
        border:1px solid #000;
        background-color:#ccc;
        background-size:30% 50%;
        }
    </style>
</head>
<body>
<div class="div1"></div>
</body>
</html>

4858美高梅 3

Paste_Image.png

c.图片比div大

background-size:百分百 1五分之一,那么background-position:0%
一成效果是使图片距离div上面-6px,总计办法是(300*1.2-300)*0.1 =
6,也就是往上推图片。所以background-position:0%
百分之百;总是是图表底部紧贴div底边

c.图片比div大

background-size:百分之百 1五分之一,那么background-position:0%
百分之10功力是使图片距离div上边-陆px,总结格局是(300*CSS常见手艺,遁地风暴。1.2-300)*0.壹 =
6,相当于往上推图片。所以background-position:0%
百分百;总是是图片尾巴部分紧贴div底边

b.图片和div一样大

background-size:百分百 百分之百;那里无论background-position:0%
1/10;中的百分之10安装为何都没有成效。

background-size:contain,缩放图片以完全装入父成分,父成分大概现身留白。

<!DOCTYPE html>
<html>
<head>
<title>background-size</title>
<style type=”text/css”>
.div1 {
background:url(image/cat.jpg) 0 0 no-repeat;
width:650px;
height:300px;
border:1px solid #000;
background-color:#ccc;
background-size:contain;
}
</style>
</head>
<body>
<div class=”div1″></div>
</body>
</html>

 ![Paste_Image.png](http://upload-images.jianshu.io/upload_images/2198142-874fc62ee15f65ff.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
- ```background-size:cover```,缩放背景图片以完全覆盖父元素,图片可能部分看不到。
- ```
<!DOCTYPE html>
<html>
<head>
    <title>background-size</title>
    <style type="text/css">
        .div1 {
        background:url(image/cat.jpg) 0 0 no-repeat;
        width:650px;
        height:300px;
        border:1px solid #000;
        background-color:#ccc;
        background-size:cover;
        }
    </style>
</head>
<body>
<div class="div1"></div>
</body>
</html>

4858美高梅 4

Paste_Image.png

(3)小案例

<!DOCTYPE html>

<html lang=”en”>

<head>

<meta charset=utf-8>

<title>为了生存</title>

<style type=”text/css”>

*

{

      margin:0;

      padding:0;

}

#lol

{

      width:300px;

      height:400px;

      background-image:-webkit-linear-gradient(90deg,#be1e1e, #be9b1e,
#1ebe21, #1ebeb5, #1e24be, #ba1ebe, #be1e1e);

      border:1px solid red;

      background-repeat:no-repeat;

      background-size:100% 700%;

      animation:dnf 1s infinite alternate;

}   

@keyframes dnf

{

      100%

      {

           background-position:0% 100%;

      }

}

</style>    

<script type=”text/javascript”>

</script>

</head

<body>

      <div id=”lol”></div>

</body>              

</html>                 

                        

                         

(3)小案例

<!DOCTYPE html>

<html lang=”en”>

<head>

<meta charset=utf-8>

<title>为了生存</title>

<style type=”text/css”>

*

{

      margin:0;

      padding:0;

}

#lol

{

      width:300px;

      height:400px;

      background-image:-webkit-linear-gradient(90deg,#be1e1e, #be9b1e,
#1ebe21, #1ebeb5, #1e24be, #ba1ebe, #be1e1e);

      border:1px solid red;

      background-repeat:no-repeat;

      background-size:100% 700%;

      animation:dnf 1s infinite alternate;

}   

@keyframes dnf

{

      100%

      {

           background-position:0% 100%;

      }

}

</style>    

<script type=”text/javascript”>

</script>

</head

<body>

      <div id=”lol”></div>

</body>              

</html>                 

                        

                         

c.图片比div大

background-size:百分百 1五分一,那么background-position:0%
百分之10效应是使图片距离div上边-陆px,计算方法是(300*1.2-300)*0.一 =
6,约等于往上推图片。所以background-position:0%
百分之百;总是是图表尾部紧贴div底边

六.怎么着让一个div水平居中?怎样让图片水平居中

(3)小案例

<!DOCTYPE html>

<html lang=”en”>

<head>

<meta charset=utf-8>

<title>为了生存</title>

<style type=”text/css”>

*

{

      margin:0;

      padding:0;

}

#lol

{

      width:300px;

      height:400px;

      background-image:-webkit-linear-gradient(90deg,#be1e1e, #be9b1e,
#1ebe21, #1ebeb5, #1e24be, #ba1ebe, #be1e1e);

      border:1px solid red;

      background-repeat:no-repeat;

      background-size:100% 700%;

      animation:dnf 1s infinite alternate;

}   

@keyframes dnf

{

      100%

      {

           background-position:0% 100%;

      }

}

</style>    

<script type=”text/javascript”>

</script>

</head

<body>

      <div id=”lol”></div>

</body>              

</html>                 

                        

                         

(-①)写在前头
笔者用的是chrome49,那篇是为后续做打算。主要性的调动以及毕…

i.

– 若想使div水平居中,须给div毫无疑问幅度,margin反正设为auto:

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>div水平居中</title>
<style type=”text/css”>
.div1 {
width:600px;
height:400px;
border:1px solid #000;
background-color:#ccc;
margin:0 auto ;
}
</style>
</head>
<body>
<div class=”div1″></div>
</body>
</html>

 ![Paste_Image.png](http://upload-images.jianshu.io/upload_images/2198142-87dfb555072db708.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
- 给该```div```配置属性```display:inline-block;```并为其父元素添加样式```text-align:center```,亦可使```div```水平居中:
- ```
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>div水平居中</title>
    <style type="text/css">
        body {
            text-align:center;
        }
        .div1 {
        width:600px;
        height:400px;
        border:1px solid #000;
        background-color:#f00;
        display:inline-block;
        }
    </style>
</head>
<body>
<div class="div1"></div>
</body>
</html>

4858美高梅 5

Paste_Image.png

ii.

– 对于img元素,因为其属于行内成分,故可在其父成分上增多text-align:center样式就能够兑现程度居中:

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>任务8</title>
<style>
body {
text-align:center;
}
</style>
</head>
<body>
<img src=”image/cat.jpg”>
</body>
</html>

 ![Paste_Image.png](http://upload-images.jianshu.io/upload_images/2198142-49f55e20b953e761.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
- 也可以将```img```元素添加```display:block; margin:0 auto; ```样式,同样可以达到效果:
- ```
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>任务8</title>
    <style>
    img {
        display:block;
        margin:0 auto;
    }
    </style>
</head>
<body>
<img src="image/cat2.jpg">
</body>
</html>

4858美高梅 6

Paste_Image.png

– 假若将图纸设置为背景图片,也可通过background-position:center的艺术将图片设置成水品居中。

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>任务8</title>
<style>
.div1 {
background:url(image/cat2.jpg) 0 0 no-repeat;
background-position:center top;
/top意指图片在笔直方向上进步对齐,亦可取center或bottom/
width:100%;
height:700px;
border:1px solid #000;
background-color:#ccc;
}
</style>
</head>
<body>
<div class=”div1″></div>
</body>
</html>

 ![Paste_Image.png](http://upload-images.jianshu.io/upload_images/2198142-9c9bbadf350bc3a9.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
###7.如何设置元素透明?兼容性?
可用```opacity```属性设定元素的透明度,```opacity```取值为1(完全不透明)到0(完全透明)之间。
兼容性见下图:
![Paste_Image.png](http://upload-images.jianshu.io/upload_images/2198142-5c300e0cc0395f0b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
###8.```opacity```和 ```rgba```都能设置透明,有什么区别
当```opacity```属性的值应用于某个元素上时,是把这个元素(包括它的内容)当成一个整体看待,其子元素都会产生透明效果。
而```rgba```只是颜色的一个参数,并不会对其子元素产生影响。
举例:
- ```
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>任务8</title>
    <style>
    .div1 {
        background-color:rgb(255,0,0);
        opacity:0.5;    
        height:100px;
        width:200px;
        }
    .div2 {
        background-color:rgba(255,0,0,0.5); 
        height:100px;
        width:200px;
    }
    </style>
</head>
<body>
<div class="div1">
    <h1>opacity</h1>
</div>
<div class="div2">
    <h1>rgba</h1>
</div>
</body>
</html>

效果:

4858美高梅 7

Paste_Image.png


本学科版权归小编及饥人谷全数,转发请评释来源。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有