码迷,mamicode.com
首页 > Web开发 > 详细

CSS-background

时间:2018-06-27 14:56:48      阅读:187      评论:0      收藏:0      [点我收藏+]

标签:username   put_user   元素   class   display   isp   padding   bsp   没有   

一、Background-image

  在元素中设置背景图片  

  (1)默认图片铺满整个元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>background1</title>
    <style>
        .bk{
            height: 100px;
            background-image: url("image/2.png");
        }
    </style>
</head>
<body>
    <div class="bk"></div>
</body>
</html>

  技术分享图片

  实际中的2.png图片是很小,只是其中的一竖条:

  技术分享图片

  所以使用background-image,图片会充满整个元素,重复平铺

 (2)background(no-repeate;repeate-x;repeate-y)

  决定是否图片堆叠,也是重复放置图片

  no-repeate:不堆叠  

.bk_image{
            position: fixed;
            height: 100px;
            top: 0;
            right: 0;
            left: 0;
            background-image: url("image/2.png");
            background-repeat: no-repeat;
        }

  只放置一张图片 

   技术分享图片

  repeate-x:水平堆叠  

.bk_image{
            position: fixed;
            height: 100px;
            top: 0;
            right: 0;
            left: 0;
            background-image: url("image/2.png");
            background-repeat: repeat-x;
        } 

  技术分享图片

  repeate-y:垂直堆叠 

.bk_image{
            position: fixed;
            height: 100px;
            top: 0;
            right: 0;
            left: 0;
            background-image: url("image/2.png");
            background-repeat: repeat-y;
        } 

   技术分享图片

 

二、Background-position

  定位和展示背景如图片  

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>bk-position</title>
    <style>
        .bk_position{
            height: 180px;
            width: 20px;
            border: 1px solid red;
            background-image: url("image/18.png");
            background-repeat: no-repeat
        }
    </style>
</head>
<body>
    <div class="bk_position"></div>
</body>
</html>

  如果有一张图片如下显示,如何只展示其中某一个图标呢

  技术分享图片

  我们可以改变height的高度,先只显示一个图表,如下:  

height: 20px;

  技术分享图片

  那接下来需要展示心型图标的话,光改变div元素的位置是没有用的,因为元素位置变了,那这个图片也会随之改变,所以需要背景图片位置改变而元素位置不变。这可以通过backgr-position实现 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>bk-position</title>
    <style>
        .bk_position{
            height: 20px;
            width: 20px;
            border: 1px solid red;
            background-image: url("image/18.png");
            background-repeat: no-repeat;
            background-position-x: 0;
            background-position-y: 0;
        }
    </style>
</head>
<body>
    <div class="bk_position"></div>
</body>
</html>

  x和y分别表示横轴和纵轴,(0,0)表示左上角。调整位置,就能展示心型了

  技术分享图片  

  技术分享图片

 三、Background简写

  省略重复代码  

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>bk-position</title>
    <style>
        .bk_position{
            height: 20px;
            width: 20px;
            border: 1px solid red;
            background: url("image/18.png") 0 -119px no-repeat;
        }
    </style>
</head>
<body>
    <div class="bk_position"></div>
</body>
</html>

  分别表示为:url地址、position的x和y、是否重复

 四、事例 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>login</title>
    <style>
        .input_text{
            height: 20px;
            width: 150px;
            //border: 1px solid red;
        }
        .input_username{
            height: 20px;
            width: 150px;
        }
        .image_username{
            display: inline-block;
            height: 20px;
            width: 15px;
            background: url("image/icons.png") -308px 0px no-repeat;
        }
    </style>
</head>
<body>
    <div class="input_text">
        <span class="image_username"></span>
        <input type="text" class="input_username" />
    </div>
</body>
</html>

  技术分享图片

  将人物图标移到输入框的右边

  (1)两层叠加使用position的relative+absolute 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>login</title>
    <style>
        .input_text{
            position: relative;
            height: 20px;
            width: 150px;
            //border: 1px solid red;
        }
        .input_username{
            height: 20px;
            width: 150px;
        }
        .image_username{
            position: absolute;
            right: 1px;
            top: 3px;
            display: inline-block;
            height: 20px;
            width: 15px;
            background: url("image/icons.png") -308px 0 no-repeat;
        }
    </style>
</head>
<body>
    <div class="input_text">
        <span class="image_username"></span>
        <input type="text" class="input_username" />
    </div>
</body>
</html>

  技术分享图片

  看上去是完成要求了,但是输入的内容会覆盖图标

  技术分享图片

  可以给input标签添加一个padding,这样可以让input输入的内容不会覆盖到图标  

.input_username{
            height: 20px;
            width: 130px;
            padding-right: 20px;
        }

  这样输入的内容就不会到图标那块

  技术分享图片 

CSS-background

标签:username   put_user   元素   class   display   isp   padding   bsp   没有   

原文地址:https://www.cnblogs.com/bigberg/p/9232866.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!