将下列HTML内联样式属性转换为css

我用bootstrap studio设计了一个网页，所有的样式属性都是内联的。我想改变这一点，并将这些添加到一个单独的css文件。我有麻烦这样做，因为当我添加图像为'background-image:url('img/pic.jpg');它没有出现。我不知道如何转换所有以下属性。代码如下:

<div class="intro-body" style="background: linear-gradient(90deg, rgb(8,1,36) 40%, transparent 49%), url(&quot;assets/img/0274207612d515f49012c87803a9e631.gif?h=eaa5e6b00c67acb1f616e82b147e0137&quot;) right / contain repeat-x;filter: brightness(120%) contrast(102%) hue-rotate(342deg) invert(0%) saturate(95%);">

例如我想要的是，如果html代码为<div class="intro" style="width:500px;height:400px;">单独的CSS代码应该是

.intro
{
width:500px;
height:400px;
}

你可以把它写在你的css文件中，就像你在问题中所做的那样

.intro
{
width:500px;
height:400px;
}

但是要注意在你的例子中使用正确的类名，它应该是

<div class="intro-body"> // and not "intro"

.intro-body {
background: linear-gradient(90deg, rgb(8, 1, 36) 40%, transparent 49%), url(&quot;assets/img/0274207612d515f49012c87803a9e631.gif?h=eaa5e6b00c67acb1f616e82b147e0137&quot;) right / contain repeat-x;
filter: brightness(120%) contrast(102%) hue-rotate(342deg) invert(0%) saturate(95%);
}

<div class="intro-body">"</div>

然后在你的.html文件，你必须包括css文件。在html文档的标题部分添加以下行:

<link rel="stylesheet" href="yourstyle.css">

注意:注意href属性，这取决于你在项目中的文件结构。

例如，当你的index.html文件在base文件夹中，而css文件在/styles

目录中。

index . html
样式
- yourstyle.css

那么你必须写

<link rel="stylesheet" href="./styles/yourstyle.css"> inside your index.html file

只需复制内联css并将此代码粘贴到css中与您的类扇区.intro-body

.intro-body {
width: 500px;
height: 400px;
background: linear-gradient(90deg, rgb(8,1,36) 40%, transparent 49%), url(assets/img/0274207612d515f49012c87803a9e631.gif) right / contain repeat-x;
filter: brightness(120%) contrast(102%) hue-rotate(342deg) invert(0%) saturate(95%);
}

<div class="intro-body"></div>

我想你是把css放到了单独的文件夹里，所以才会出现这个问题。

分隔css后，将url改为相对值

ie。Url ('img/pic.jpg')到Url ('./img/pic.jpg')

.intro-body {
width:500px;
height:400px;
background: linear-gradient(90deg, rgba(8,1,36,0.4), transparent 49%), url('./img/pic.jpg') right / contain repeat-x;
filter: brightness(120%) contrast(102%) hue-rotate(342deg) invert(0%) saturate(95%);
}

<body >
<div class="intro-body"></div>
</body>

创建单独的CSS文件，并将您的CSS文件包含到HTML页面中，如下所示。

<link rel="stylesheet" href="mystyle.css">

将CSS添加到该文件中，如下所示。

.intro-body {
/*your css goes here*/
}

如果文件夹结构为:FolderProject/css/style.css用于css
FolderProject/index.html用于html
FolderProject/assets/img/

css文件:

.intro-body {
width: 500px;
height: 400px;
background: linear-gradient(90deg, rgb(8,1,36) 40%, transparent 49%), url(&quot;../assets/img/0274207612d515f49012c87803a9e631.gif?h=eaa5e6b00c67acb1f616e82b147e0137&quot;) right / contain repeat-x;
filter: brightness(120%) contrast(102%) hue-rotate(342deg) invert(0%) saturate(95%);
}

index . html:

<html>
<head>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="intro-body">
</div>
</body>
</html>

相关内容

最新更新

热门标签：