1. img插入图片,用的最多,比如产品展示类

.section img {
width: 200px;/* 插入图片更改大小 width 和 height */
height: 210px;
margin-top: 30px; /* 插入图片更改位置 可以用margin 或padding 盒模型 */
margin-left: 50px; /* 插入当图片也是一个盒子 */
}

2. 背景图片一般用于小图标背景或者超大背景图片

.aside {
width: 400px;
height: 400px;
border: 1px solid purple;
background: #fff url(images/sun.jpg) no-repeat; background-size: 200px 210px; /* 背景图片更改大小只能用 background-size */
background-position: 30px 50px; /* 背景图片更该位置 用 background-position */
}

CSS - 插入图片img和背景图片的更多相关文章

  1. CSS之生成全屏背景图片

    在CSS中背景图片的填充方法: background-position:x,y(背景图片x,y轴的定位) background-repeat:no-repeat(不平铺) background-rep ...

  2. CSS再学习 之背景色 背景图片

    背景色 p {background-color: gray;} 如果您希望背景色从元素中的文本向外少有延伸,只需增加一些内边距. p {background-color: gray; padding: ...

  3. php 合并图片 (将活动背景图片和动态二维码图片合成一张图片)

    <?php //案例一:将活动背景图片和动态二维码图片合成一张图片 //图片一 $path_1 = './background.png'; //图片二 $path_2 = './FU0851_2 ...

  4. css里面如何设置body背景图片满屏

    @{    Layout = null;    ViewBag.Title = "Login Page";} <!DOCTYPE html> <html>& ...

  5. CSS背景图片常见属性设置

    在CSS中,图片属性的设置是必不可少的,下面介绍一下常见的图片属性: 1)背景图片插入:background-image:url(位置及名称);  //默认在父级元素内的左上角 2)背景平铺方式:ba ...

  6. CSS 背景图片的定位和缩放

    在 CSS 中,利用 background-image 属性我们可以指定元素的背景图片,例如: .example { background-image: url(image/some.png); ba ...

  7. 不用css样式表和背景图片实现圆角矩形,超简洁!

    当网站页面的整体布局设计好后,接下来有很多细节的实现是很让人头疼的.其中之一就是圆角矩形的实现. 在网上看了很多圆角矩形的实现方法,基本有两种,一种是用纯css实现,不需要背景图片:另一种是用背景图像 ...

  8. CSS背景图片

    1.背景图片插入 代码格式:background-image:url(): 括号内填写图片路径 2.背景图片设置大小 代码格式:background-size:宽.高 3.背景图片设置不平铺 代码格式 ...

  9. CSS background-image背景图片相关介绍

    这里将会介绍如何通过background-image设置背景图片,以及背景图片的平铺.拉伸.偏移.设置大小等操作. 1. 背景图片样式分类 CSS中设置元素背景图片及其背景图片样式的属性主要以下几个: ...

随机推荐

  1. [Qt 踩坑] 设置背景就卡退 报错 异常结束或者crashed 0xFFFFFFFF

    #开始 我现在是带着崩溃得心情写博客的 这个估计是我遇到的最混蛋的bug 我试图用Qt写个小程序 然后给窗口添加一个背景 就像这样 先不管我那个路径的问题 只要写了那个代码,就一定出错 删除了一点事情 ...

  2. JAVA常量池、栈、堆的比较(转载)

    今天在学JAVA的数据存储位置的时候,看到了一篇博文感觉不错,特此转载: http://www.cnblogs.com/Eason-S/p/5658230.html JAVA中,有六个不同的地方可以存 ...

  3. ztree-编辑节点(树节点添加,删除,修改)

    <!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - addNodes / editName / rem ...

  4. selenium+python实现自动化登录

    工作需要实现一个微博自动登录的操作,在网上差了一些资料,决定使用selenium+python实现 selenium 是一个web的自动化测试工具,主流一般配合java或者python使用,我这里使用 ...

  5. python基础(一)--python介绍

    1. Python语言 1.1 编程语言 语言是人类最重要的交际工具,是人类之间进行信息交换的主要表达方式. 编程语言是用来定义计算机程序的语言,用来向计算机发出指令. 1.2 Python语言 Py ...

  6. 数据结构--Java语言描述

    本篇文章是为了记录自己在学习数据结构时的笔记,会对常见的数据结构做基本的介绍以及使用Java语言进行实现.包括 动态数组 栈 队列 链表 二分搜索树 优先队列和堆 线段树 Trie树 并查集 AVL树 ...

  7. photoshop下载(ps)

    https://pan.baidu.com/s/1bNrUod2n1VqsA7Fr9RHtsg

  8. hive3.1.1 hive-site.xml

    <property> <name>hive.metastore.warehouse.dir</name> <value>/data/hive/wareh ...

  9. 【JS 常用操作】全选、给后来元素增加事件

    11 //全选 $("#allCheckbox").click(function () { var checkedStatus = this.checked; //alert(ch ...

  10. [WC2018]通道(乱搞,迭代)

    [洛谷题面]https://www.luogu.org/problemnew/show/P4221 这个题以及[CTSC2018 暴力写挂]都有类似的乱搞做法能通过考场数据. 具体搞法就是随一个起点, ...