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. CMDB开发(二)

    一.项目架构:目录规范 # 遵循软件开发架构目录规范 bin 启动文件 src 源文件(核心代码) config 配置文件 lib 公共方法 tests 测试文件 二.采集规范 # bin目录下新建s ...

  2. Data Lake_理解数据湖

    Pentaho首席技术官James Dixon创造了"数据湖"一词.它把数据集市描述成一瓶水(清洗过的,包装过的和结构化易于使用的).而数据湖更像是在自然状态下的水,数据流从源系统 ...

  3. 跟羽夏学 Ghidra ——简述

    写在前面   此系列是本人一个字一个字码出来的,包括示例和实验截图.本人非计算机专业,可能对本教程涉及的事物没有了解的足够深入,如有错误,欢迎批评指正. 如有好的建议,欢迎反馈.码字不易,如果本篇文章 ...

  4. 分享几个.NET开源的AI和LLM相关项目框架

    前言 现如今人工智能(AI)技术的发展可谓是如火如荼,它们在各个领域都展现出了巨大的潜力和影响力.今天大姚给大家分享4个.NET开源的AI和LLM相关的项目框架,希望能为大家提供一些参考.如果你有更好 ...

  5. element Tree 树形控件

    文档地址 https://element.eleme.cn/#/zh-CN/component/tree 代码地址 https://gitee.com/wBekvam/vue-shop-admin/b ...

  6. 08. C语言函数

    [函数基础] 函数用于将程序代码分类管理,实现不同功能的代码放在不同函数内,一个函数等于一种功能,其它函数可以调用本函数执行. C语言规定所有的指令数据必须定义在函数内部,比如之前介绍的程序执行流程控 ...

  7. SpringBoot-RSA加密

    前言 最近由于工作业务的需要,需要对指定的字段信息进行非对称加解密:由于需要加密的内容过于庞大:自己执行程序会出现:Data must not be longer than 117 bytes 的异常 ...

  8. kettle使用2-增量插入

    1.新建转换 2.在DB连接中,新建2个数据库连接 3.在输入中,新建:表输入 4.在输入中,新建:表输入 5.在输出中,新建:表输出

  9. mybaits-plus实现自定义字典转换

    需求:字典实现类似mybatis-plus中@EnumValue的功能,假设枚举类中应用使用code,数据库存储对应的value 思路:Mybatis支持对Executor.StatementHand ...

  10. QT中各控件的属性和方法

    1.在QT6中,QLabel类具有许多属性和方法,以下是QLabel类的常见属性和调用方法:setText(const QString &text):设置标签的文本内容.setAlignmen ...