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. 2019-8-31-NuGet-如何设置图标

    title author date CreateTime categories NuGet 如何设置图标 lindexi 2019-08-31 16:55:58 +0800 2019-4-27 17: ...

  2. 阿里云OSS文件上传几种方法（主要是前端）

    目录 零.准备 一.服务端签名后直传 1. 阿里云控制台配置 2. 后端接口开发(PHP) 3. 前端获取签名后上传 二.使用STS临时凭证进行上传 1. 后端接口开发(node) 2. 前端获取临时 ...

  3. SQL Server实战二：创建、修改、复制、删除数据库表并加以数据处理

      本文介绍基于Microsoft SQL Server软件,实现数据库表的创建.修改.复制.删除与表数据处理的方法. 目录 1 交互式创建数据库表T 2 交互式创建数据库表S 3 T-SQL创建数据 ...

  4. Pinely Round 3 (Div. 1 + Div. 2)

    A 构造题,分两种情况考虑 上下都行,左右选一个 左右都行,上下选一个 void solve() { int n; cin >> n; vector<pair<int, int ...

  5. gprMax项目代码分解：gprMax.py

    目录 1. 引言 2. 代码分解 (1) 导入模块 (2)main()函数 (3)run_main()函数 (4)run_std_sim()函数 (5)run_benchmark_sim()函数 (6 ...

  6. 解决HtmlUnit执行JS报错提示ScriptException

    问题描述 HtmlUnit作为一款比Selenium更轻量的HeadLess的Java版本浏览器模拟器,不需要在服务器上安装部署浏览器及其Driver程序. 但是,众所周知,HtmlUnit对JS脚本 ...

  7. vue 安装教程（如何在node环境下搭建vue项目）

    如果要配置node.js环境请查看(node.js环境在Window和Mac中配置,以及安装cnpm和配置Less环境)在终端输入命令 cnpm -v出现版本号 1.安装vue    window : ...

  8. pageoffice 6版本隐藏office工具栏和自定义按钮，并修改标题栏内容

    在实际项目集成调用PageOffice的过程中: (1)有时需要把Office的工具栏隐藏,比如只读模式打开文件的时候,Office工具栏上的按钮几乎都是灰掉的,此时显示Office工具栏没有任何意义 ...

  9. PageOffice实现文件在线安全预览——禁止编辑、下载、复制等

    实际应用中,很多时候不仅需要在线编辑文件,还需要在线安全预览文件,要求不能复制.下载.另存到本地等情况.pageoffice可以实现文件在线安全预览,禁止:编辑.复制.粘贴.右键菜单.选择.下载.另存 ...

  10. c++ RTTI Runtime Type Identification 运行阶段类型识别

    NoVirtualBase* NvirBase = new NovirtualDerivd(); NvirBase->print(); // auto nd1 = dynamic_cast< ...