精华内容
下载资源
问答
  • -HTML&CSS- ——在DIV中放图片

    千次阅读 2018-04-19 01:02:00
    上传的图片不好观察,可以右键选择“新的窗口打开图片”。 说明:用一个大DIV包住这么些内容,给每个图片和链接也分配一个小DIV,其中,通过左移或者右移(即设置 background-position )多次测试出几个小图案...

    素材图片:

    要求结果为:

    自己的代码为:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>DivTest</title>
    	<link rel="stylesheet" type="text/css" href="css/divTest.css">
    </head>
    <body>
    	<div class="cen">
    		<div class="tp d1"></div>
    		<div class="tp"><a href="#">购物车</a></div>
    		<div class="tp d2"></div>
    		<div class="tp"><a href="#">帮助中心</a></div>
    		<div class="tp d3"></div>
    		<div class="tp"><a href="#">加入收藏</a></div>
    		<div class="tp d4"></div>
    		<div class="tp"><a href="#">设为首页</a></div>
    		<button>登录</button>
    		<button>注册</button>
    	</div>
    </body>
    </html>
    /*
    * @Author: lenovo
    * @Date:   2018-04-14 11:12:55
    * @Last Modified by:   lenovo
    * @Last Modified time: 2018-04-19 00:39:09
    */
    .cen{
    	float:right;
    	margin-top:20px;
    	margin-right:100px;
    }
    .tp{
    	float:left;
    }
    .d1{
    	background: url("F:/HtmlTest/Learn414/images/icon.gif");
    	background-repeat: no-repeat;
    	background-position: -2px -2px;
    	//background-color:green;
    	//border:1px solid red;
    	height:23px;
    	width:23px;
    }
    .d2{
    	background-image: url("F:/HtmlTest/Learn414/images/icon.gif");
    	background-repeat: no-repeat;
    	background-position: -43px -2px;
    	//background-color:green;
    	//border:1px solid red;
    	height:23px;
    	width:23px;
    }
    .d3{
    	background-image: url("F:/HtmlTest/Learn414/images/icon.gif");
    	background-repeat: no-repeat;
    	background-position: -84px -2px;
    	//background-color:green;
    	//border:1px solid red;
    	height:23px;
    	width:23px;
    }
    .d4{
    	background-image: url("F:/HtmlTest/Learn414/images/icon.gif");
    	background-repeat: no-repeat;
    	background-position: -125px -2px;
    	//background-color:green;
    	//border:1px solid red;
    	height:23px;
    	width:23px;
    }
    

    完成情况为:

    上传的图片不好观察,可以右键选择“在新的窗口打开图片”。

    说明:用一个大DIV包住这么些内容,给每个图片和链接也分配一个小DIV,其中,通过左移或者右移(即设置background-position)多次测试出几个小图案之间的横向X轴像素差为41px,再稍加调整就可以了!

     

    首先第一个区别:语义。p标签的语言是段落(paragraph),而div是没有语义的,只是一块用来方便设置样式排版的,<div>和<p>都是块状元素。

    第二个区别:就是p标签有默认样式,段落前后都会有一行空白区域,当然你用div自己设置也是可以的。div的添加如果没有什么css修改的话对样式没有影响。

    转载于:https://my.oschina.net/u/3805464/blog/1797572

    展开全文
  • 想实现一个类似qq头像的效果,将方形图片放到圆形div中,设置overflow:hidden,超过的地方隐藏,代码如下。但是出现了问题,只显示了图片的一部分。(有时候会在图片下方出现空白) 1.html代码 <div class=...

    前言

    想实现一个类似qq头像的效果,将方形图片放到圆形div中,设置overflow:hidden,超过的地方隐藏,代码如下。但是出现了问题,只显示了图片的一部分。(有时候会在图片下方出现空白)

    1.html代码

    <div class="round">
         <img src="images/icon5.jpg" class="icon">
    </div>

    2.css代码 

    .round{
             
             width:10px;
             height:10px;
             border-radius: 50%;
             overflow: hidden;
                 
    }
     .icon{
              width:100%;
              height:100%;            
    }

    问题解决

    当把div的宽和高设置的大一些,比如20px,就可以显示完全。这跟图片原始大小是有关系的。但有时候根据布局安排,div的大小不能太大。

    这边的解决办法是:在img标签中设置display:block;

    原因解释:https://mor10.com/removing-white-space-image-elements-inline-elements-descenders/

    这边对上面链接的内容做一下大概的解释。

    在文字排版中,英文字母可以分为三类,如下图所示。

    其中,o、r、a在基线和中位线之间,其他字母有升序(f、i)和降序(g)。

    当放置img图片时,图片下方与基线对齐,为下级部分留出空间。

    在HTML中,img标签是一个内联元素,也就是它被浏览器视为文本。当在页面上放置文本时,通常会为下级留出空间。将其改为块级元素后问题解决。

    展开全文
  • 2每次最多有一个div图片会自动播放图片,其余的不会自动播放图片。 下面是我的代码 var picTimer; function play_pic(object) { var curIndex = 0; var timeInterval = 1000; var arr = new Array...
  • 图片如何在div中居中

    千次阅读 2018-07-01 20:27:20
    即可达到垂直居中(切记,是给图片加,不是div,很多人容易搞错)还有一个方法,就是用table布局,td默认是水平方向居左的,但是垂直方向是居中的,所以你套一个table后再插入图片的话,也能很好的达到垂直居中...

    给div设定text-align:center;可使图片水平居中,但是图片不能设置display: block;,再给图片img设定 vertical-align:middle;即可达到垂直居中(切记,是给图片加,不是div,很多人容易搞错)

    还有一个方法,就是用table布局,td默认是水平方向居左的,但是垂直方向是居中的,所以你套一个table后再插入图片的话,也能很好的达到垂直居中

    展开全文
  • 用CSS控制,这是比较常用的方法:CSS代码: .i{ background-image: url("/images/icon.png"); background-position:-26px -79px; } DIV代码:效果:

    用CSS控制,这是比较常用的方法:

    CSS代码:

    <style>
        .i{
        	background-image: url("/images/icon.png");
            background-position:-26px -79px;
        	
        }
        </style>

    DIV代码:

    <div class="i" style="width:20px;height:40px;line-height:40px;"></div><caption>SysUser</caption>

    效果:


    原图:


    展开全文
  • div中使用背景图片

    千次阅读 2017-10-25 20:40:40
    在div中使用背景图片,并可以随意缩放图片
  • div中添加图片

    千次阅读 2012-03-16 13:11:12
    要想往DIV中添加图片分为两种情况讨论: 第一种: document.getElementById('qyery').style.background = 'url(xxx.jpg)'; 第二种: var imgNode = document.createElement('img'); imgNode....
  • 让一个图片在div中居中(四种方法)
  • 如何让背景图片不重复填充在div中

    千次阅读 2017-03-16 10:10:47
    1.使用background,不能改变图片的大小,只能直接进去; 2.用img标签可以做到填充: ,div设好了width和height,img给height:100%;width:100%即可(图片有可能会失真) 拓展:填充好图片后,怎么可以上面布局...
  • css设置图片在div中居中

    千次阅读 2015-04-10 08:32:46
    如何通过CSS让图片居中
  • div中图片下方有3px左右的空白,怎么去掉?如何让图片铺满整个div?其实方法有很多,也都很简单。此本文介绍两种常用方法。
  • 图片放大,缩小也是前端经常遇到得问题,以下就根据这个需求,做如下示范: <!DOCTYPE html> <html> <head> <title>图片放大</title> </head> <style type="text/css">...
  • div id="dataImage" style="no-repeat;z-index:-1;"&gt; //这里width和height根据需求随便设置 &lt;img src="/super/images/pgjg.jpg" style="width:100%;height:100%&...
  • css,网页常见功能,图片div垂直水平居中
  • 当我们用div拼接一些图片时,会发现div下方会有多出来的一条白线,用chrome浏览器查看元素的时候, 图片的高度是326.3px,但是作为容器的div的高度确是330px,貌似直接就四舍五入了,其中的原因是因为img作为行内元素...
  • 在div中加入img图片时会发现div的高度并不等于img图片的高度,借用一下小米的logo做了一下测试,代码简单明了,请继续往下看: html> div class="wrap"> img src=...
  • 做的时候想要边框为比较好看的样式,...需要把这个图片填到相应的div里面,但是很显然碰到一个问题,图片太大,而且进去以后还不是响应式的 那么解决问题的就来了: background:url(1.jpg);-webkit-backgroun...
  • 我们想让图片div的位置吻合。原因在于img标签需要转成块级标签 具体深层次的原因我也不太清楚下面是解决办法// A.将没有吻合的img标签设置块元素 img{display:block;}// B.或者把图片所在的父容器设置如下代码 ...
  • 图片增加这个样式: display: block;
  • div id="editer" contenteditable="true" style="border: 1px solid #ccc; width: 400px; height: 200px"&gt; 123456123456 &lt;/div&gt; &lt;button onclick=&...
  • 请问div中图片下方的说明文字如何能添加的上去呀?我查了好久都没有搞出来,请大神指教,谢谢。代码及现在效果图如下: 交叉口建模 ...
  • 网上搜了一下,然后再根据我自己的改了一下,此记录。 我的可编辑div <div class="send_content" contenteditable="true" id="send_content"></div> 我的上传按钮 这里我的上传按钮改变了...
  • 前置2:一块固定的div缩略去显示1-9张图片,外层div格式固定,1-9张图片的格子div划分也固定(9张图片的时候类似九宫格)。 如果我图片按照宽度去等比缩放,溢出的高度通过css overflow:hidden去隐藏,部分图片...
  • 最近网上碰到一个人问了我一个问题,可编辑div中插入文字或者图片。因为web在线编辑器我从来只是用,基本不会去研究源代码。后来正好一个在线聊天web项目也要用到这个功能,我就特地看看了代码。 基本上编辑...
  • <style type="text/css">... /* 解决办法 插入图片得盒子里 或图片标签内设置选择器并设置css样式 float属性 float是浮动属性 这样能完美解决盒子跑出的问题*/ div.box2{ float:left; } .
  • 在DIV CSS布局对于图片列表或图片排版时,图片不是固定宽度高度大小,但图片占位是固定宽度高度,这个时候如果使用CSS固定死图片大小(宽度 高度),这个时候如果图片相对于这个位置不是等比例大小,那么这张图片...
  • 将大图片完整的到小div

    千次阅读 2017-11-26 23:22:05
    将一个比较大的图片插入到一个较小的div里可能会导致图片溢出。 如果想将图片完整的插入到div里,只需css给img设置:width:100%;height:100%;即可。
  • 即使表框确实变成了圆角,但实际上看到的背景还是正方形的给需要的div设置border:none;属性去掉边框即可。
  • <div class="divContent"> ,3491635869&fm=27&gp=0.jpg"> </div> 图片二:长小于宽 <div class="divContent"> ,1176056835&fm=27&gp=0.jpg"> </div> 以下为图片原来的样子 ,3491635869&fm=27&gp=0.jpg"> ,...
  • 写代码的时候经常遇到这样一个问题,如果div里嵌套一个img元素且div的高度是由img的高度来撑开,那么div的高度总会比img的高度多3px。好了,废话不多说,直接给大家上代码。html代码:&lt;div id = "...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 88,690
精华内容 35,476
关键字:

在div中怎么放图片