Question

提前感谢您的时间和帮助！

我正试图在Wordpress主题上编辑标题图片，运气不佳。它似乎是一种我从未遇到的“直线式”。我搜索了很多，但似乎没有什么对我有用，包括使用important!（虽然我可能错误地使用它）。

我要做的就是将background-size:cover更改为background-size:120%，以便在较小的屏幕上更好地缩放图像。 现在，当在移动设备上观看时，它会将我的脸分成两半。

<div id="custom-header" style="background-    image:url(http://brentbareham.com/wp-content/uploads/2016/09/HeaderImage.jpg);background-size:cover;">
        <div class="container">
                    <div class="header-content">
                            </div><!-- .header-content -->
                </div><!-- .container -->
    </div>

这是我第一次广泛编辑主题的主题。我正在使用一个儿童主题，而不是那个重要的主题，到目前为止我已经取得了成功，但我似乎无法想出这个主题。

所以你可以看到我正在看的确切内容，网站是http://brentbareham.com

再次感谢！

Answer 1

只要内联样式上没有!important，您就可以使用直接css !important来完成您想要的内容：

#custom-header {
    background-image: none !important;
}

这是一个jsFiddle，它会消除它的作用。

Answer 2

使用jquery可以覆盖图像

myscript.js 您可以添加主题js文件夹

jQuery(document).ready(function(){
    jQuery("#custom-header").removeAttr("style").attr("style","background-image:url(http://brentbareham.com/wp-content/uploads/2017/Image.jpg)");
})

主题functions.php

中的

function js_head_scripts() {
    wp_enqueue_script( "headerjs",  get_template_directory_uri()."/js/myscript.js" );
}

add_action('wp_head', 'js_head_scripts');

Answer 3

您必须使用JavaScript来覆盖内联样式。由于浏览器呈现顺序，内联样式的重要性越高。所以为了重新设计你必须使用JS。然而，这将导致重排，即页面将被重绘，看起来像闪烁。

这里有一些很好的信息。

How the Browser Works

更新

对不起。 @Cale_b是正确的。您显示的代码没有！important分配给任何样式。所以有几件事情。

1）。我不确定它是否是一个typeo，但你在这里发布的HTML代码中有一个空格。

<div id="custom-header" style="background-  image:url(....
<!-- should be -->
<div id="custom-header" style="background-image:url(....

2）。将背景大小更改为＆＃34;包含＆＃34;可能会给你你正在寻找的影响。它将约束div元素内的图像。不需要JS。

3）。你可能想试试这个。

div#custom-header[style]{
    background-size: contain;
}

CSS3 background-size Property

使用CSS覆盖Wordpress主题内嵌样式

3 个答案:

更新