CSS和CSS3背景图片

CSS的背景，无法伸缩图片。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>background</title>

    <style>

        div{

            width: 100%;

            height: 1500px;

            border: 10px solid red;

            background: skyblue url(img/bg-little.png) no-repeat top right fixed;

        }

    </style>

</head>

<body>

    <div></div>

</body>

</html>

而CSS3的background-size指定了背景图片是否扩大缩小。contain一边紧贴边缘拉伸，最终高或者宽有留白。 cover按照一遍拉伸，很可能内容区域超出。而设置100% 100%是高，宽都能将内容显示出来。具体还是跟图片有关。

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Size</title>

<style type="text/css">

* {

    margin: 0;

    padding: 0;

    border: none;

}

div {

    width: 800px;

    height: 400px;

    padding: 50px;

    border: 50px solid transparent;

    /*background: color position size repeat origin clip attachment image;*/

    /*background: #abcdef center 50% no-repeat content-box content-box fixed url('bg1.jpg');*/

    background: #abcdef url('bg1.jpg') no-repeat center center;

    background-size: 50%;

    background-origin: content-box;

    background-clip: content-box;

    background-attachment: fixed;

}

span.div_border {

    position: absolute;

    top: 0;

    left: 0;

    width: 800px;

    height: 400px;

    padding: 50px;

    border: 50px solid rgba(255, 0, 0, .25);

}

span.div_padding {

    position: absolute;

    top: 50px;

    left: 50px;

    width: 800px;

    height: 400px;

    border: 50px solid rgba(255, 255, 0, .25);

}

</style>

</head>

<body>

<div></div>

<span class="div_border"></span>

<span class="div_padding"></span>

</body>

</html>

浮动

就是高度丢失了。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

   <style type="text/css">

   * {

           margin:0;

           padding:0;

   }

       .container {

           border:1px solid blue;

           margin:100px;

           /*overflow: hidden;*/

           /*zoom: 1;*/

       }

       .block1 {

           width:50px;

           height:50px;

           background-color: red;

           float: left;

       }

       .block2 {

           width:50px;

           height:50px;

           background-color: black;

           float: left;

       }

       .block3 {

           width:50px;

           height:50px;

           background-color: blue;

           float: left;

       }

   </style>

</head>

<body>

    <div class="container">

        <div class="block1"><span>1</span></div>

        <div class="block2"><span>22</span></div>

        <div class="block3"><span>333</span></div>

    </div>

</body>

</html

还有一个现象，叫文字环绕，将图片左浮动，后面的文字就会环绕图片周围，这是因为浮动元素脱离文档流，但还是在文本流当中。

定位

relative 相对定位，可定位的祖先元素，相对定位的元素不会离开常规流。

absolute 绝对定位，使元素脱离常规流，使元素的位置与文档流无关，因此不占据空间。元素绝对定位后 生成块状元素，不论原来它在正常文档流中是什么类型的元素。可结合 top、left、right bottom 使用。绝对定位的元素的位置相对于最近的已定位祖先元素进行定位，可以是 absolute、relative、fixed。

fixed 固定定位，固定定位元素不会随着视口滚动而滚动，继承absolute特点，参照物是视口。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>position-relative</title>

    <link rel="stylesheet" href="./reset.css">

    <style>

    .block {

        position: relative;

        top: 0;

        left: 0;

        width: 80px;

        height: 80px;

        line-height: 80px;

        border: 2px solid black;

        text-align: center;

        float: left;

        z-index: 9;

    }

    .block:nth-child(2) {

        position: relative;

        top: 0;

        left: -80px;

        border-color: red;

        z-index: 1;

    }

    </style>

</head>

<body>

    <div class="block">A</div>

    <div class="block">B</div>

</body>

</html>

居中

元素内容单行，多行居中，table-cell针对Margin并不感冒，vertical-align，要有高度。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>block、inline</title>

    <style type="text/css">

        #dan{

            width:300px;

            height:300px;

            border: 1px solid red;

            margin: 0 auto;

            text-align: center;

            line-height: 300px;

        }

        #warp{

            width:300px;

            height:300px;

            border: 1px solid red;

            margin: 0 auto;

        }

        #duo{

            height:300px;

            text-align: center;

            display: table-cell;

            vertical-align: middle;

        }

    </style>

</head>

<body>

    <div id="dan">单行文本内容</div>

    <div id="warp">

        <div id="duo">

            多行文本居中

            多行文本居中

            多行文本居中

            多行文本居中

            多行文本居中

            多行文本居中

        </div>

    </div>

</body>

</html>
 
 

CSS和CSS3（背景，图片，浮动等）的更多相关文章

  1. 用extract-text-webpack-plugin提取出来的css文件中背景图片url的不正确的问题

    在一个main.js中require一个scss文件,scss文件中用了背景图片,图片url是用的相对路径,用extract-text-webpack-plugin插件提取出的css文件背景图片路径不 ...

  2. css如何使背景图片水平居中

    CSS中定位背景图片的属性是:background-position,用法background-position 属性设置背景图像的起始位置. 你要水平居中可以: div{background-pos ...

  3. 【Python全栈-CSS】CSS实现网页背景图片自适应全屏

    CSS实现网页背景图片自适应全屏 功能:实现能自适应屏幕大小又不会变形的背景大图,而且背景图片不会随着滚动条滚动而滚动. 以下是用CSS实现的方法: <html> <head> ...

  4. css代码添加背景图片常用代码

    css代码添加背景图片常用代码 1 背景颜色 { font-size: 16px; content: ""; display: block; width: 700px; heigh ...

  5. Vue项目打包发布后CSS中的背景图片不显示

    相信有很多同学在学习vue的刚开始都遇到过项目打包发布后发现CSS中的背景图片不显示,具体如何解决只需要更改bind的配置即可 修改 build/utils.js 中的 generateLoaders ...

  6. 让低版本IE支持css3背景图片缩放属性background-size

    IE7,8中不支持背景图片的缩放.下面的代码可以帮你实现兼容 background: url(/content/img/yuehuibtn.png);//css3代码 background-size: ...

  7. 用CSS让网页背景图片居中的方法

    网页背景居中的方法有很多种的.这里介绍一些用CSS让背景图片居中的方法. 让背景图片居中的第一个方法是用像素设定,很多都用这种,但是也是最麻烦的: <div style="width: ...

  8. css 中的背景图片小技巧和存在的坑

    body 的背景图设置 第一种 :这种情况下背景图片可以缩放 但是不能完全等比缩放 background: url(imgs/1.jpg)no-repeat; background-position: ...

  9. CSS实现网页背景图片自适应全屏

    一张清晰漂亮的背景图片能给网页加分不少,设计师也经常会给页面的背景使用大图,我们既不想图片因为不同分辨率图片变形,也不希望当在大屏的情况下,背景有一块露白,简而言之,就是实现能自适应屏幕大小又不会变形 ...

  10. css 如何让背景图片拉伸填充避免重复显示

    如何让背景图片拉伸填充,这个问题听起来似乎很简单.但是很遗憾的告诉大家.不是我们想的那么简单. 比如一个容器(body,div,span)中设定一个背景.这个背景的长宽值在css2.1之前是不能被修改 ...

随机推荐

  1. RT-Thread内存管理

    一.内存管理的特点 分配内存的时间必须是确定的.一般内存管理算法是根据需要存储的数据的长度在内存中去寻找一个与这段数据相适应的空闲内存块,然后将数据存储在里面.而寻找这样一个空闲内存块所耗费的时间是不 ...

  2. R1_ES知识图谱

    业务量增加,优化..优化... 学习... 学习..... 阮一鸣,eBay Pronto 平台技术负责人,管理了 eBay 内部上百个 Elasticsearch 集群,数据规模超过 4000 节点 ...

  3. PHP游戏线下线上陪玩平台APP小程序H5源码开发多少钱？可用于家政，陪诊，陪伴服务等

    做陪玩app项目,不少创业者们都比较头疼该如何去选择软件系统!目前软件市场上,陪玩app平台的软件系统五花八门,价位也是参差不齐.创业者们都比较纠结是定制开发,还是选择开元源码二次开 发? 前两天成都 ...

  4. redis-desktop-manager-0.8.0.3844

    redis-desktop-manager-0.8.0.3844 下载地址: https://www.aliyundrive.com/s/Y2fobkVjAdF 链接:https://pan.baid ...

  5. WordPress 整合Bootstrap制作分页代码

    1.整合Bootstrap分页代码 * 因为wordpress默认仅仅提供简单分页, 所以要实现数字分页,需要自定义函数,wordpress可以结合bootstrap制作分页,bootstrap提供了 ...

  6. fastposter v2.8.0 发布 电商海报编辑器

    fastposter v2.8.0 发布 电商海报编辑器 fastposter海报生成器,电商海报编辑器,电商海报设计器,fast快速生成海报 海报制作 海报开发.二维码海报,图片海报,分享海报,二维 ...

  7. Springboot 项目集成 PageOffice V6 最简单代码

    本文描述了PageOffice产品在Springboot项目中如何集成调用.(本示例使用了Thymeleaf模板引擎) 新建Springboot项目:pageoffice6-springboot2-s ...

  8. pageoffice6提取word指定位置（数据区域）的值

    在实际的开发过程中,经常会遇到提取Word文档中指定位置的数据保存到数据库中的需求,PageOffice客户端控件即支持在线保存Word文件,也支持Word文档中的指定位置的数据或所有的数据提交到服务 ...

  9. Asp-Net-Core开发笔记：给SwaggerUI加上登录保护功能

    前言 在 SwaggerUI 中加入登录验证,是我很早前就做过的,不过之前的做法总感觉有点硬编码,最近 .Net8 增加了一个新特性:调用 MapSwagger().RequireAuthorizat ...

  10. redis 的下载与安装

    下载地址:https://github.com/MicrosoftArchive/redis/releases 选择免安装包: 解压到路径  D:\Redis-x64-3.0.504 用管理员权限打开 ...