Question

我想在图片上创建像视差一样的文字。并且，我使用背景图像内联样式来显示图像。如何设置此图像的高度？它可能是图像的高度。但是，我的图像显示高度与文本行有关。例如，我有两行，我的图像高度只显示两行高。

如果我以像素（高度：400px）设置高度，它可以工作，但对响应式设计有何看法？这是最佳做法吗？请指教。以下是我的CSS风格。提前谢谢。

background-image: url(http://localhost:31903/wp-content/uploads/2015/05/corn-field-440338_1920-1024x680.jpg);
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center;
background-size: 100% auto;

我使用wp_add_inline_style来设置图像样式

function metabox_inline_style( $post_id ) {

$MyOptions = get_option('MyOptions');

    $custom_metabox_css = '';

        foreach ( $MyOptions as $key => $MyOption ) {
if (isset($MyOption['background-image']) ) { 
                $custom_metabox_css .= "#parallax-shortcode-{$key}.parallax {";
                $custom_metabox_css .= (isset($MyOption['background-image']) ? 'background-image:url('.$MyOption['background-image'].');' :'');
                $custom_metabox_css .= (isset($MyOption['background-image']) ? 'background-attachment: fixed;' :'');
                $custom_metabox_css .= (isset($MyOption['background-image']) ? 'background-repeat: no-repeat;' :'');
                $custom_metabox_css .= (isset($MyOption['background-image']) ? 'background-position: center;' :'');
                $custom_metabox_css .= (isset($MyOption['background-image']) ? 'background-size: 100% 100%;' :'');
                $custom_metabox_css .= (isset($MyOption['background-image']) ? 'position: absolute;' :'');
                $custom_metabox_css .= (isset($MyOption['background-image']) ? 'height: 100%;' :'');

                $custom_metabox_css .= "}";
            }
        }

        wp_add_inline_style( 'custom-style', $custom_metabox_css);   
 }

add_action( 'wp_enqueue_scripts', 'metabox_inline_style');

Answer 1

可能没有设置div的高度，背景图像仅包含文本它只能通过设置高度来实现。制作响应式放置样式7za rn archive.7z old.txt new/location/new.txt

jsfiddle here

背景图像内联样式的高度

1 个答案: