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. Oracle和达梦：循环执行SQL(如循环插入数据)

    Oracle和达梦:循环执行SQL(如循环插入数据) 其中:WHILE i <= 100000 LOOP,10万是循环10万次 其中:i NUMBER := 1;,1是从一开始 -- 循环执行一 ...

  2. 【GUI软件】小红书搜索结果批量采集，支持多个关键词同时抓取！

    目录 一.背景介绍 1.1 爬取目标 1.2 演示视频 1.3 软件说明 二.代码讲解 2.1 爬虫采集模块 2.2 软件界面模块 2.3 日志模块 三.获取源码及软件 一.背景介绍 1.1 爬取目标 ...

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

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

  4. Sphinx 自动化文档

    目录 文章目录 目录 Sphinx 入门 reStructuredText 语法格式 标题.列表.正文.要点 表格 代码块 引用其他模块文件 引用静态图片 Sphinx Sphinx 是一个工具,它使 ...

  5. vue-router单页面应用的多标签页使用问题

    正常的思维 做多vue页面应用,我们的第一反应是配置多个入口点,多个vue应用,编译成多个HTML文件,由服务器来决定路由.这是正常的思维. 但谁知道单页面应用也能做到类似的效果呢.单页面不过是服务器 ...

  6. [数字华容道] Html+css+js 实现小游戏

    [数字华容道] Html+css+js 实现小游戏 效果图 代码预览 在线预览地址 代码示例 <!DOCTYPE html> <html> <head> <m ...

  7. NFS共享文件

    NFS共享文件 服务端 安装NFS [root@localhost www] yum -y install nfs-utils rpcbind 创建需要共享的文件夹share [root@localh ...

  8. 使用 Microsoft Edge WebDriver 自动执行和测试 WebView2 应用 Selenium

    https://learn.microsoft.com/zh-cn/microsoft-edge/webview2/how-to/webdriver

  9. .NET Core应用程序每次启动后使用string.GetHashCode()方法获取到的哈希值(hash)不相同

    前言 如标题所述,在ASP.NET Core应用程序中,使用string.GetHashCode()方法去获取字符串的哈希值,但每次重启这个ASP.NET Core应用程序之后,同样的字符串的哈希值( ...

  10. Understanding Swift’s value type thread safety - 代码分析（一）

    结构体并不代表线程安全,swift在此上未做保证 func testScenarioA() throws { var store: Int = 0 DispatchQueue.concurrentPe ...