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

最新推荐文章于 2024-08-19 22:06:15 发布

Masquerades

最新推荐文章于 2024-08-19 22:06:15 发布

阅读量2.6w

点赞数 9

本文链接：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博客就这样啦！

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Masquerades

关注关注

9
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

background-image使用

web18224617243的博客

08-01

2574

url("")；

background-image: url(data:image/gif;base64,AAAA)

ywb201314的专栏

12-06

2850

这算是一种图片路径的新写法。将图片进行编码，然后存在文档中。我先解释一下各自含义： data: ----获取数据类型名称 image/gif; -----指数据类型名称 base64 -----指编码模式 AAAAA ------指编码以后的结果。 background-image: url(data:image/gif;base64,AAAA)这句话的意思总体就是“获取数据类型是image

参与评论您还未登录，请先登录后发表或查看评论

Css——css 动态绑定 style 中 backgroundImage 背景图片写法

热门推荐

rmkloveme

10-26

14万+

background-image:用于设置需要显示背景图片；例如-->background-image:url(demo.jpg); 大家知道ulr()中是填写路径：（现在假设背景图片名字叫做demo.jpg） 1、如果该css文件和背景图片在同一文件夹存在且并不包含于其他文件夹那么直接填写demo.jpg； -->background-image:ur

css样式表里面引用background-image时，url路径错误原因及解决方法

mandy' blog

06-04

3万+

一直对css中background-image：url的路径问题存在误解，半知半解的，有时候路径写的对，有时候又是错的，完全碰运气，今天写resume时又遇到这个问题，在此整理下： css样式表中background-image要引入image文件夹下的portrait.jpg图片，正确的写法是： background-image:url('../image/portrait....

background-image的url

我想我是海冬天的大海心情随风轻摆

04-11

2301

background-image:url　就直接从该css文件所在路径做为相对路径找起。如: .Wdate{ background:#fff url(datePicker.gif) no-repeat right; } //这就说明: 此图片与css文件在同一

background-blend-mode:CSS 属性 background-blend-mode 的示例

06-04

在实际应用中，我们可以通过设置`background-blend-mode`属性为不同的混合模式，实现各种效果。例如，如果我们有两个背景图像，一个深色，一个浅色，使用`multiply`模式可以使深色图像更显突出，而`screen`模式则...

CSS-Background-Generator:https

04-07

- `background-image`: 指定背景图像，可以是URL或者渐变。 - `background-repeat`: 控制背景图像是否及如何重复，如`no-repeat`、`repeat-x`、`repeat-y`。 - `background-position`: 定义背景图像的位置，如`...

Javascript获取background属性中url的值

10-21

在这个例子中，`getElementById`函数被用来获取ID为`image-preview`的元素，然后我们访问`style`属性并读取`backgroundImage`。这将返回一个字符串，格式可能是`url("path/to/image.jpg")`。如果我们要提取出URL...

css3实现一个div设置多张背景图片及background-image属性实例演示

09-27

本文将深入探讨如何使用`background-image`属性来实现多张背景图片的设置，并介绍CSS3中的背景渐变。首先，我们来看一下`background-image`属性的基本语法。它接受一个或多个 `<bg-image>` 值，每个值可以是 `none...

tailwindcss-background-extended:Tailwind CSS缺少的所有后台实用程序

05-13

Tailwind CSS后台扩展插件该插件将所有缺少的后台实用程序添加到Tailwind CSS中。安装将此插件添加到您的项目中： # Install using pnpm ... backgroundImage : { // defaults to {} tailwindcss : "url('https:

background-image: url(图片路径)；设置元素背景无法显示

Lsiyi_的博客

07-15

5521

background-image: url(图片路径);设置元素背景无法显示

Vue相对路径设置标签style=“background-image = ‘url( )‘“无效(CSS中设置背景图片无效； backgroundImage设置本地图片无效； style换不了背景图)

qq_36048145的博客

02-04

3247

在不断地尝试中感觉出了标签行内样式style和内/外部样式css的区别,找到了正确的方向,解决了相对路径不能展现图片的问题

“background-image:url(data:image”data类型的Url格式简介

10-08

1万+

所谓"data"类型的Url格式，是在RFC2397中提出的，目的对于一些“小”的数据，可以在网页中直接嵌入，而不是从外部文件载入。例如对于img这个Tag，哪怕这个图片非常非常的小，小到只有一个点，也是要从另外一个外部的图片文件例如gif文件中读入的，如果浏览器实现了data类型的Url格式，这个文件就可以直接从页面文件内部读入了。 data类型的Url格式早在1998年就提出了，时至

background-image的用法

q1003675852的博客

12-10

4029

background-image 属性用于为一个元素设置一个或者多个背景图像，本文列举了background-image 属性的一些用法，并对示例做了总结和思考。

前端学习 -- Html&Css -- 背景

A08110123的博客

05-16

1466

background 在一个声明中设置所有的背景属性。background-attachment 设置背景图像是否固定或者随着页面的其余部分滚动。background-color 设置元素的背景颜色。background-image 设置元素的背景图像。background-position 设置背景图像的开始位置。background-repeat 设置是否及如何重复背景图像...

CSS background-image属性

小阳的博客

12-08

4万+

但凡牛掰人物出场，都伴随着“Duang”的特技，它们会不停的加特技，加特技，加特技。CSS背景图片的background-image就是这样一位牛人，它一登场肯定也会加“特技”。下面我们来看看它的“特技”；background-image属性值模式background-image的属性值模式就是用来给它加“特技”的。它的值模式有： url()模式 linear-gradient()模式 repeat

CSS【background+url路径写法（同一路径或不同路径）】

随便写写

07-07

1万+

CSS 背景属性用于定义HTML元素的背景。CSS 属性定义背景效果:background-color 属性定义了元素的背景颜色.页面的背景颜色使用在body的选择器中: background-image 属性描述了元素的背景图像.默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体.尽量把图片放置在与.html文件同一目录下【我自己在写background-image的时候，把网页文件和图片放到两个不同文件夹中，需要加../同一级/图片】默认情况下 background-image

background-image: url动态路径

07-28

对于在CSS中设置动态路径的背景图像，您可以使用以下方法之一： 1. 使用相对路径：可以使用相对于当前CSS文件的路径来指定背景图像。例如，如果您的CSS文件与图像位于同一目录中，您可以使用相对路径来引用图像： ```css background-image: url(image.jpg); ``` 如果图像位于CSS文件的上级目录中，可以使用`../`来引用它： ```css background-image: url(../image.jpg); ``` 2. 使用绝对路径：您也可以使用网站根目录的绝对路径来引用图像。例如，如果图像位于网站根目录的`images`文件夹中，可以使用以下方式： ```css background-image: url(/images/image.jpg); ``` 这将从网站的根目录开始查找图像。 3. 使用URL变量：如果您使用CSS预处理器（如Sass或Less），您可以将图像路径存储在变量中，然后在样式中使用该变量： ```scss $bg-image: "image.jpg"; background-image: url($bg-image); ``` 这样，当您需要更改图像路径时，只需更新变量即可。请注意，动态路径可能取决于您的具体环境和文件结构。确保根据您的特定情况进行相应调整。