前端应用_css_背景图片（background-image）和插入图片的区别

最新推荐文章于 2023-03-09 15:44:25 发布
最新推荐文章于 2023-03-09 15:44:25 发布
阅读量5k 收藏 8
点赞数 1
文章标签： css 背景图片和插入图片区别
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34979346/article/details/97752172
版权

让图片 作为背景

使用 background-image：url（image path）
示例如下：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>背景色</title>
    <style>
        .box{
        margin:50px auto;
        border:5px solid #000;
        width:380px;
        height:270px;
        background-image: url(22.png);
        font-size:30px;
        text-align:center;
        }
    </style>
</head>
<body>
<div class="box"> i love you </div>
</body>
</html>

效果图：
在这里插入图片描述
总结下：

  1. 图片作为背景， 并且默认是循环的平铺，
  2. 字体在图片的上边，不会被背景图片掩盖， 也就是 不占用文档流的位置。

插入图片

在这里插入图片描述

<div class="box2"><image src="22.png"> i love you </div>

通过比较 可以看出 第二个方法 字体 没有漂浮在图片上边， 显然 没有当作背景 ，当成文档流的一部分。

上海_彭彭
关注
css加载一张图片 设置整个页面背景
A_aspectJ的博客
08-31 1147
在css中，可以使用background-image或background属性来加载图片。这两个属性都可以配合url()函数来为元素设置背景图像。background-image属性为元素设置背景图像，而background是一个简化属性，可以在一个声明中设置所有背景样式，当然也包括背景图片。
前端背景图放置_浅谈CSS背景图片background-image
weixin_34556808的博客
12-24 2147
我们可以通过CSS来在任何HTML元素中放置背景图片。这主要是通过CSS background-image属性来完成的。body { background-image: url("images/gradient.gif"); }我们不能够使用 src 属性来制作背景图片，这是一个HTML标签的属性，而不是CSS属性。同样我们也不能使用href属性或link标签。通过使用background-ima...
前端——css 背景background
起风了
02-03 1172
文章目录小练习美化a超链接颜色背景图 background-image背景图定位 background-position用background-position做css sprite用position调整背景图固定背景图background-attachment 小练习美化a超链接 &amp;amp;lt;style type=&amp;quot;text/css&amp;quot;&amp;amp;gt; *{ p..
background和img插入图片
Akuil的博客
11-23 977
background 打包后图片不显示
css里面添加图片
Toml_的博客
03-09 1万+
使用img标签插入图片，使用background属性和background-image属性插入背景图片background-image属性用于设置一个元素的背景图像；background-image 属性会在元素的背景中设置一个图像。背景图片根据 background-repeat 属性的值，图像可以无限平铺、沿着某个轴(x 轴或 y 轴)平铺，或者根本不平铺。初始背景图像(原图像)根据 background-position 属性的值放置。background-position：指定背景图像的位置。
CSS3内容处理插入图片
jimjiayu
08-01 3717
<!DOCTYPE html> <html lang="en"><head> <meta charset="UTF-8"> <title>CSS3内容处理插入图片</title> <style> * { margin: 0; padding: 0; } body { margin-bottom: 20px;
巧用CSS background-image属性制作图形背景
we
07-12 1619
先看一张广告图，这是我们平时在浏览网页的时候，经常见到的一种文字广告设计，在文字周围绕着白色线条，我想大多数设计师可能就直接在ps中画一个png图片，再用css background-image 背景属性插入图片链接来实现。但今天这篇文章，我要用background-image 来画这个白色线条框。 在了解了background这些属性后，我们就可以在html前端页面中用css来实现一些简单的背景图，例如：▲平铺的圆点背景 ▲平铺的斜线条背景 ▲平铺的马赛克背景 ▲指定4种颜色的背
html多张图片背景,css3实现一个div设置多张背景图片及background-image属性实例演示...
weixin_39957186的博客
06-04 1664
引子以前做网页布局的时候，一个div只能设置一张背景图片，设置多个背景的话，要用多个div嵌套才能实现，这样兼容性比较好。若您的网站要求兼容浏览器低版本，建议用这种方法。css3的出现，解决了一个div只能设置一个背景的问题，使一个div可以设置多个背景图片。background-image还可以设置线性渐变，等效果。题外话关于css3的background，功能很强大，有很多属性，像backgr...
用CSS写一本书_网页前端_css_源码
10-04
同时，`<img>`元素可能用于插入`floor.jpg`和`bg.jpg`作为背景图像，使用`background-image`属性，并可能配合`background-size`、`background-position`和`background-repeat`来控制背景图像的显示方式。 `floor....
css如何设置背景图片？background属性添加背景图片
热门推荐
lin123_00的博客
05-18 5万+
在前端开发过程中，为了页面的美观，往往都会给html页面添加背景图片。那么如何利用css设置html中用图片做背景？本章就给大家介绍css怎样设置背景图片。有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。 更多相关视频： 0基础前端利用『HTML+CSS』制作你喜欢的暗黑破坏神网页开发：BV1C54y1X7ro 前端发展简史，功能以及未来趋势！（你值得观看）：BV1w5411s7e4 给想学编程又无从下手的小白一些建议：BV1Zf4y117ji 「HTML+CSS」实现妙笔千山.
html中背景图片等比例缩放,CSS实现响应式全屏背景图+用CSS3实现全屏按比例缩放背景图片...
weixin_32616031的博客
06-07 5788
该楼层疑似违规已被系统折叠隐藏此楼查看此楼随着逐浪CMS新版的一些效果逐渐放出，有不少的朋友想全屏的背景图片如何设计。在不同的时代有不同的流行网站显示形式，当前很流行的一种网页形式就是满屏大图，本文将用最简单的方式实现该效果。用到了CSS 属性background-size ,无需javascript。先看demo，打开后，调整浏览器窗口大小，观察背景图的变化。如果在你的项目中也需要这样的效果，...
前端系列之CSS（背景和列表）
十二指环的博客
01-19 395
一.CSS背景<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> div{ width: 300px; height: 300px;
前端背景图放置_css如何设置背景图片？background属性添加背景图片
weixin_36280540的博客
02-05 8859
在前端开发过程中，为了页面的美观，往往都会给html页面添加背景图片。那么如何利用css设置html中用图片做背景？本章就给大家介绍css怎样设置背景图片。有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。css怎样设置背景图片?css background属性就是专门设置背景的属性，可以设置背景色，也可以设置背景图片。下面看看background可以设置的属性：background-...
css样式里把背景设置为图片,利用css如何设置全屏背景图片
weixin_42308697的博客
08-03 1282
利用css如何设置全屏背景图片如果你有一张比较绚烂的图片想做背景，可以这样设置，就跟随百分网小编一起去了解下吧，想了解更多相关信息请持续关注我们应届毕业生考试网!代码如下：body{background:url(img.jpg);background-position:center;background-repeat:no-repeat;}但效果很可能会是这样：图片没有重叠，居中，并且...她太小...
xpath定位元素方法_前端css基础篇（三） background背景元素position定位以及清除浮动的四种方法...
weixin_39845220的博客
12-12 662
一、 background背景元素1. background-color背景颜色可以简写 background；默认值是transparent。（透明） 不能继承2. background-image背景图片可以简写backgroundurl（“图像的url路径地址”）图像的URL；none 表示背景上没有设置任何图像，这是默认值；inherit 指定背景图像应该从父元素继承background-...
WEB前端学习:CSS学习_CSS背景图片相关属性
Dream_ruins的博客
03-25 866
背景 文章目录背景一、主要属性1. background-color2. background-image3. background-repeat4. background-position5. background-size6. background-attachment7. background-clip8. background（简写属性）9.多背景设置持续更新... 该篇为讲得是背景图片...
网站页面导入css,图片等文件的相对路径和绝对路径问题
qq_30021219的博客
07-30 4280
相对路径：“../”表示上一级目录开始，“./”表示当前同级目录开始，相对，肯定是个参考对象，很多人可能会认为这个参考对象就是导入css或图片等的页面，但其实对于网站访问而言，这个对象是参考你所访问的url地址的，因为最近在写thinkphp，相对的话对于thinkphp项目的Get方式访问是没有问题的，但是以默认方式访问就出问题了，图片无法加载，通过调试模式看了一下路径，才知道其实参考的对象是以
css之背景图片和插入图片的区别以及精灵图的使用
haha_hello的博客
02-21 1万+
一，背景图片和插入图片<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>40-css背景图片和插入图片的区别.html</title> <style> div{ width: 200px; height:200px;
html如何载入图片,CSS如何插入图片？
weixin_36430300的博客
06-02 1万+
在CSS中，可以使用background-image属性或background属性来插入图片。background-image属性或background属性可以为元素设置背景图像。初始背景图像(原图像)根据background-position属性的值放置。background-image属性background-image 属性为元素设置背景图像。元素的背景占据了元素的全部尺寸，包括内边距和边框...
前端 el-button中塞入背景图片
最新发布
09-09
在前端中，如果想要在el-button中塞入背景图片，可以使用CSS的background-image属性。可以通过以下几种方式来实现： 1. 使用内联样式：可以直接在el-button的style属性中设置background-image属性，将背景图片的URL作为属性值。例如：<el-button style="background-image: url('image.jpg')">按钮</el-button>。这样就可以在el-button中插入背景图片了。 2. 使用自定义类名：可以在CSS样式表中定义一个自定义类，将background-image属性设置为背景图片的URL，然后将这个类应用到el-button上。例如： 在CSS中定义： .custom-button { background-image: url('image.jpg'); } 然后在el-button中添加class属性： <el-button class="custom-button">按钮</el-button> 这样就可以将背景图片应用到el-button中了。 需要注意的是，如果要实现背景图片的双向绑定，可以使用Vue.js的v-bind指令将背景图片的URL绑定到一个data属性上，然后在el-button中使用这个属性作为背景图片的URL。例如，可以将背景图片的URL绑定到data属性bgImage上： data() { return { bgImage: 'image.jpg' } } 然后在el-button中使用v-bind指令将bgImage绑定到background-image属性上： <el-button :style="{ 'background-image': 'url(' + bgImage + ')' }">按钮</el-button> 这样，当bgImage改变时，背景图片也会相应地更新。 综上所述，可以通过内联样式、自定义类名和v-bind指令来在el-button中塞入背景图片。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值