CSS中background-image:url()属性设置

最新推荐文章于 2024-08-13 08:32:38 发布
最新推荐文章于 2024-08-13 08:32:38 发布
阅读量2.6w 收藏 4
点赞数 9
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u014661298/article/details/50450751
版权

background-image 是css中设置背景图片的属性，最近在我用MVC架构开发WEB时却出现了一个小问题。

我在视图里写了这样一句代码：<body style="background-image:url(assets/img/backgrounds/1.jpg)" 

很显然，我是想将整个页面的背景设置成一张图片，注意里面assets文件夹是Web项目根目录下的文件夹，，这样写貌似没有错误，

但是运行后那张背景图片并没有显示出来，审查元素的结果


显然，在根目录下又加上了控制器“home”的名字，后来我又试了<body style="background-image:url(~/assets/img/backgrounds/1.jpg)" 这种写法，，

依旧是同样的问题。


后来查了些资料，有两种常用的写法不会出现上面的错误：

1.<body style="background-image:url(/assets/img/backgrounds/1.jpg)"   这种是加一个“/”

2.<body style="background-image:url(../assets/img/backgrounds/1.jpg)"  这种是加“../”


其实，这个问题很简单，嘿嘿，，好吧 ，我的第一篇CSDN博客就这样啦！


Masquerades
关注
CSS-Background-Generator:https
04-07
- `background-image`: 指定背景图像，可以是URL或者渐变。 - `background-repeat`: 控制背景图像是否及如何重复，如`no-repeat`、`repeat-x`、`repeat-y`。 - `background-position`: 定义背景图像的位置，如`...
background-image: url(data:image/gif;base64,AAAA)
ywb201314的专栏
12-06 2846
这算是一种图片路径的新写法。将图片进行编码，然后存在文档中。 我先解释一下各自含义： data: ----获取数据类型名称 image/gif; -----指数据类型名称 base64 -----指编码模式 AAAAA ------指编码以后的结果。 background-image: url(data:image/gif;base64,AAAA)这句话的意思总体就是“获取数据类型是image
CSS 初学 （二）使用、注释
weixin_42646630的博客
03-17 438
如何添加 CSS 当浏览器读到样式表时，它将根据样式表中的信息来格式化 HTML 文档。 三种使用 CSS 的方法 有三种插入样式表的方法： 外部 CSS 内部 CSS 行内 CSS 外部 CSS 通过使用外部样式表，您只需修改一个文件即可改变整个网站的外观！ 每张 HTML 页面必须在 head 部分的 <link> 元素内包含对外部样式表文件的引用。 外部样式表可以在任何文本编辑器中编写，并且必须以 .css 扩展名保存。 外部 .css 文件不应包含任何 HTML 标签
ImgURL 开源项目使用教程
最新发布
gitblog_01142的博客
08-13 307
ImgURL 开源项目使用教程 imgurlImgURL是一个简单、纯粹的图床程序，让个人图床多一个选择。项目地址:https://gitcode.com/gh_mirrors/im/imgurl 1. 项目的目录结构及介绍 ImgURL 是一个开源的图床程序，其目录结构如下： imgurl/ ├── admin/ │ ├── css/ │ ├── fonts/ │ ├── img/...
background-image:url();url中怎么写；以及区分background属性；
热门推荐
rmkloveme
10-26 14万+
background-image:用于设置需要显示背景图片；  例如-->background-image:url(demo.jpg); 大家知道ulr()中是填写路径：（现在假设背景图片名字叫做demo.jpg） 1、如果该css文件和背景图片在同一文件夹存在且并不包含于其他文件夹 那么直接填写demo.jpg； -->background-image:ur
background-image的用法
q1003675852的博客
12-10 3976
background-image 属性用于为一个元素设置一个或者多个背景图像，本文列举了background-image 属性的一些用法，并对示例做了总结和思考。
前端学习 -- Html&Css -- 背景
A08110123的博客
05-16 1464
background 在一个声明中设置所有的背景属性。background-attachment 设置背景图像是否固定或者随着页面的其余部分滚动。background-color 设置元素的背景颜色。background-image 设置元素的背景图像。background-position 设置背景图像的开始位置。background-repeat 设置是否及如何重复背景图像...
CSS 背景(background)
里昂的博客
10-21 756
背景颜色(color) background-color:颜色值; 默认的值是 transparent 透明的 背景图片(image) background-image : none | url (url) 小技巧： 提倡 背景图片后面的地址，url不要加引号。 背景平铺（repeat） background-repeat : repeat 背景图像在纵向和横向上平铺（默认的） |...
background-blend-mode:CSS 属性 background-blend-mode 的示例
06-04
在实际应用中，我们可以通过设置`background-blend-mode`属性为不同的混合模式，实现各种效果。例如，如果我们有两个背景图像，一个深色，一个浅色，使用`multiply`模式可以使深色图像更显突出，而`screen`模式则...
postcss-image-set-function:在CSS中使用image-set（）
05-19
PostCSS image-set（）函数 可让您按照规范在CSS中使用image-set()函数显示与分辨率有关的image-set() 。 .example { background-image : image-set ( url( img.png ) 1 x, url( img@2x.png ) 2 x, url( img@print....
css3实现一个div设置多张背景图片及background-image属性实例演示
09-27
本文将深入探讨如何使用`background-image`属性来实现多张背景图片的设置，并介绍CSS3中的背景渐变。 首先，我们来看一下`background-image`属性的基本语法。它接受一个或多个 `<bg-image>` 值，每个值可以是 `none...
Javascript获取background属性中url的值
10-21
在这个例子中，`getElementById`函数被用来获取ID为`image-preview`的元素，然后我们访问`style`属性并读取`backgroundImage`。这将返回一个字符串，格式可能是`url("path/to/image.jpg")`。 如果我们要提取出URL...
css中background-size属性使用介绍
09-25
在CSS中，`background-size`属性是一个非常重要的样式，它用于控制背景图像的尺寸，从而影响元素背景的显示效果。这个属性允许我们精确地设定背景图像的宽度和高度，或者使用预定义的值来实现特殊效果。以下是关于`...
tailwindcss-background-extended:Tailwind CSS缺少的所有后台实用程序
05-13
Tailwind CSS后台扩展插件 该插件将所有缺少的后台实用程序添加到Tailwind CSS中。 安装 将此插件添加到您的项目中： # Install using pnpm ... backgroundImage : { // defaults to {} tailwindcss : "url('https:
详解css中background-clip属性的作用
12-12
在CSS中，`background-clip`属性是一个非常实用的样式规则，它决定了元素背景的绘制范围，即背景...在实际项目中，可以结合其他CSS属性，如`background-image`、`background-position`等，创造出丰富的背景展示效果。
css-shorthand-expand:扩展CSS速记属性
05-06
{'background-image' : 'url(image.png)' ,'background-repeat' : 'no-repeat' ,'background-color' : '#ff0'} 当前支持以下属性。 背景字形填充利润边界边框宽度边框样式边框颜色边界顶右边界底边
Vue相对路径设置标签style=“background-image = ‘url( )‘“无效(CSS中设置背景图片无效； backgroundImage设置本地图片无效； style换不了背景图)
qq_36048145的博客
02-04 3224
在不断地尝试中感觉出了标签行内样式style和内/外部样式css的区别,找到了正确的方向,解决了相对路径不能展现图片的问题
background-image使用
m0_62404884的博客
05-18 4万+
目录 background-image:(" ") background-repeat属性（背景平铺） background-size属性（设置背景图片大小） background-position属性（背景图片位置） 1.background-image: url(" ") ; 首先要知道background-image是将图片作为背景，使用方法为： background-image: url("") ; 其次是关于图片路径问题， 如果该...
vue中内联style动态写background-image
weixin_43703816的博客
06-30 932
vue中内联style动态写background-image
background-image: url动态路径
07-28
对于在CSS中设置动态路径的背景图像，您可以使用以下方法之一： 1. 使用相对路径：可以使用相对于当前CSS文件的路径来指定背景图像。例如，如果您的CSS文件与图像位于同一目录中，您可以使用相对路径来引用图像： ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值