如何将其转换为CSS?

如何将其转换为CSS?,css,Css,我在inspector中编辑了这个,并希望它在CSS中实现 <div id="av_section_1" class="avia-section main_color avia-section-default avia-no-border-styling avia-full-stretch avia-bg-style-scroll avia-builder-el-0 el_before_av_section avia-builder-el-first av-minimum-

我在inspector中编辑了这个,并希望它在CSS中实现

    <div id="av_section_1" class="avia-section main_color avia-section-default avia-no-border-styling avia-full-stretch avia-bg-style-scroll  avia-builder-el-0  el_before_av_section  avia-builder-el-first  av-minimum-height av-minimum-height-custom container_wrap fullsize" style="background-repeat: no-repeat; background-image: url(https://download.unsplash.com/34/BA1yLjNnQCI1yisIZGEi_2013-07-16_1922_IMG_9873.jpg); background-attachment: scroll; background-position: top right; " data-section-bg-repeat="stretch">

有没有人能帮我把它转换成CSS,然后让它在上面运行呢


谢谢

只需添加一个类并为其命名,在
CSS
文件中说
someClass

.someClass {
    background-repeat: no-repeat !important;
    background-image: url(https://download.unsplash.com/34/BA1yLjNnQCI1yisIZGEi_2013-07-16_1922_IMG_9873.jpg) !important; 
    background-attachment: scroll !important; 
    background-position: top right !important;
}
然后修改div标记,如下所示:

 <div id="av_section_1" class="avia-section main_color avia-section-default avia-no-border-styling avia-full-stretch avia-bg-style-scroll  avia-builder-el-0  el_before_av_section  avia-builder-el-first  av-minimum-height av-minimum-height-custom container_wrap fullsize someClass" data-section-bg-repeat="stretch"></div>
<div id="av_section_1" class="avia-section main_color avia-section-default avia-no-border-styling avia-full-stretch avia-bg-style-scroll  avia-builder-el-0  el_before_av_section  avia-builder-el-first  av-minimum-height av-minimum-height-custom container_wrap fullsize someClass" data-section-bg-repeat="stretch" style="background-repeat: no-repeat !important;background-image: url(https://download.unsplash.com/34/BA1yLjNnQCI1yisIZGEi_2013-07-16_1922_IMG_9873.jpg) !important;background-attachment: scroll !important;background-position: top right !important;"></div>

希望这有帮助

Satwik给了你很多好的建议。但是,我会推荐一个稍微不同的解决方案,不包括
!重要信息
。试试这个

CSS:

HTML:


如果你尝试不成功,请考虑使用顺序和专一性,以确保你的CSS正被你所喜欢的应用。代码>!重要信息是一个有价值的调试工具,但不应留在部署的代码中

最后编写的CSS将覆盖先前的CSS。因此,请确保
。您的类
位于样式表的底部,并且您没有在正在使用的样式表之后调用其他样式表

如果您仍有问题,请参阅以下链接以了解特定性:


我还建议您合并一些课程。你可能会发现真正深入挖掘上述网站是很有价值的。在最佳实践的基础上培养良好的习惯将是向前迈进并可能与他人合作的关键。

将其移至css的底部,并添加以下内容!重要指示。好的,id呢?是的,所以它在wordpress中,所以我认为我不能设置类。
.your-class {
   background-repeat: no-repeat;
   background-image: url(https://download.unsplash.com/34/BA1yLjNnQCI1yisIZGEi_2013-07-16_1922_IMG_9873.jpg); 
   background-attachment: scroll; 
   background-position: top right;
}
 <div id="av_section_1" class="avia-section main_color avia-section-default avia-no-border-styling avia-full-stretch avia-bg-style-scroll  avia-builder-el-0  el_before_av_section  avia-builder-el-first  av-minimum-height av-minimum-height-custom container_wrap fullsize your-class" data-section-bg-repeat="stretch"></div>