css背景图片显示不完怎么解决?

css设置背景图片显示不全是因为背景图片过大导致的,我们可以通过设置div大小大于背景图片或使用background-size属性设置背景图片小于div大小使背景图片显示完全。

示例:

下面我们来看一下通过设置div大小来使背景图片完全显示:

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
width:100px;
height:100px;
background-size:cover; 
background: url

('https://img.php.cn/upload/article/000/000/013/5da3e4e32f6e0593.jpg') no-repeat;
}
</style>
</head>
<body>

<div></div>

</body>
</html>

效果图:

1.jpg

设置div大小后

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
width:200px;
height:200px;
background-size:cover; 
background: url

('https://img.php.cn/upload/article/000/000/013/5da3e4e32f6e0593.jpg') no-repeat;
}
</style>
</head>
<body>

<div></div>

</body>
</html>

效果图:

2.jpg

Image placeholder
前端答疑
未设置
  10人点赞

没有讨论,发表一下自己的看法吧

推荐文章
css背景图片调用不显示是什么原因?

css背景图片无法显示,有以下几方面原因:  1、css没有被调用;请检查css调用是否成功。  2、css图片地址不对;请检查css图片地址是否正确。  3、元素的高度没有固定,是auto或者没有设

CSS如何让背景图片不重复?

CSS如何让背景图片不重复?css中设置完背景图后,不指定平铺属性,默认是横向纵向重复的,导致图片出现重复。让图片不重复可以设置background-repeat属性。css中background-r

css中背景透明的图片不透明怎么解决

css中背景透明的图片不透明怎么解决一、使用滤镜解决img{ background:transparent; -ms-filter:"progid:DXImageTransform.Microsoft

css图片后的文字无法居中对齐怎么解决?

比如说,现在我要做一个简单的删除按钮,只由一个icon和“删除”两个字组成,你会如何布局,给你30秒时间考虑。好,先亮出HTML代码如下:删除很简单,就是一个class为del的div元素下有两个sp

css before显示不出来怎么办

cssbefore显示不出来怎么办cssbefore伪类元素要显示,需要设置content属性,而且要具有一定的宽高,可以设置display为inline-block和block,让元素的宽高生效。下

css不同浏览器兼容性问题怎么解决?

css不同浏览器兼容性问题的解决方案1.浏览器CSS样式初始化由于每个浏览器的css默认样式不尽相同,所以最简单有效的方式就是对其进行初始化,相信很多朋友都写过这样的代码,在所有CSS开始前,先把ma

css因mime类型不匹配而被忽略怎么解决?

怎么解决?进入注册表编辑器,查看HKEY_CLASSES_ROOT\.css里面的ContentType是否是text/css1、如何进入注册表编辑器通过快捷键"win"+"R",调用运行窗口在运行窗

css文件中文乱码怎么解决?

css文件中文乱码怎么解决?一、字体乱码:1、比如设置字体为宋体:font-family:’宋体’;但因此产生的一个问题是,如果CSS编码有误,会导致页面加载后CSS中的中文字体乱码。通常会采用对中文

php中css不加载怎么解决?

php中css不加载怎么解决?解决方法:1、首先打开HTML文档;2、然后在head标签中找到引入css文件的link标签;3、最后在link标签的href属性的值前面,加上__STATIC__即可。

ie6加载不了css怎么解决?

ie6加载不了css怎么解决?IE6不加载css文件,是因为css文件的编码不正确,使用记事本创建的css文件,默认编码时ANSI,这种情况下在其他浏览器下CSS样式会正常显示,但IE6及以下版本就不

ie11下不能引入外部css怎么解决?

ie11下不能引入外部css怎么解决?问题:在IE11下使用link标签引入css时,无法正常引入,直接在页面中使用style标签没问题。原因:头文件的问题。解决方法:●删除头部的●或者,将头部改成

css让div显示不同内容

css让div显示不同内容思路:1、使用nth-of-type伪类选择器选择不同的div;2、使用::before伪类元素添加不同内容即可。(相关课程推荐:css视频教程) Document

iis部署html css无法显示怎么解决

iis部署htmlcss无法显示怎么解决如果你的网站在VS或其他软件中运行时具有CSS和JS功能,但到了IIS中就消失了,导致网站变成纯文字界面。你需要进行如下尝试。1、首先确认是否打开IIS中的“动

css中怎么解决表格边框不显示的问题?

css中怎么解决表格边框不显示的问题?html中的表格默认是不显示边框的,可以设置表格的border属性来添加边框,设置cellspacing属性为0来将边框合并,显示单一边框。css中也可以设置表格

不完全指南:程序员怎么找海外工作

这两年,越来越多的技术人想去海外工作,不是去东南亚,而是以英文为主的美国、加拿大、英国、新西兰、澳大利亚等国家,尤其是活跃在一线城市、年薪可观的程序员老哥们。土哥认识几个在北京工作的大佬,他们对海外工

【css】多种背景及使用场景

推荐课程:学习猿地--Java开发工程师在线课--送商业项目--点击进入 background相关使用CSSbackground是最常用的CSS属性之一,但是我们经常使用这个,但往往疏忽到底表达的是什

css3-背景渐变

推荐课程:CSS3基础视频教程#WEB前端必修课--学习猿地免费体验课 线性渐变linear-gradient(direction,color-stop1,color-stop2,...);带兼容写法

一篇文章带你了解CSS3 背景知识

LoremIpsumDolorLoremipsumdolorsitamet,consectetueradipiscingelit,seddiamnonummynibheuismodtincidun

IE浏览器页面显示不全怎么办?

快速修复浏览器方案(鉴于系统环境不同→请活学活用以下方法→根据具体情况决定做哪些)1、打开浏览器,点“工具”→“管理加载项”那里禁用所有可疑插件,或者你能准确知道没问题的保留。然后→工具→INTERN

jquery版本冲突怎么解决?

jquery版本冲突怎么解决?jQuery多个版本冲突的解决方法。1、分别引入不同版本的jquery库;2、使用jQuery.noConflict(true)方法为jquery设置一个别名;3、使用立

jQuery名称冲突怎么解决?

因为许多JavaScript库使用$作为函数或变量名,jquery也一样。其实$只是jquery的一个别名而已,假如我们需要使用jquery之外的另一js库,我们可以通过调用$.noConflict(

Jquery load()乱码怎么解决?

Jqueryload()乱码怎么解决?如果用jQueryload方法加载的文档中包含中文字符,可能会引起乱码问题。要解决这个问题,方法1:所加载的文档本身应当采用UTF-8格式编码。在记事本中,默认的

jquery ajax提交数据乱码怎么解决?

为了避免乱码,可以做到以下几步解决方法1、保持编码的统一,包括文件编码,数据库编码,网页content-type编码检查一下建议中文都是用UTF-8,使用gbk/gb2312有可能会出现乱码2、使用p