Question

我想在标题中添加背景图片并为其设置背景位置。这是我的代码无法正常工作..

HTML

 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Home</title>
<!-- Meta viewport tag is to adjust to all Mobile screen Resolutions-->
<meta name="viewport"
    content="width=device-width, initial-scale=1, maximum-scale=1" />

<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/Jstyle.css" />
<script type="text/javascript" src="Javascript/jquery1.js"></script>
<script type="text/javascript" src="Javascript/jquery2.js"></script>

</head>
<body>
    <div data-role="page" id="project">


        <div data-role="header" class="header"></div>

        <div id="ad" align="center">

            <img alt="image" src="images/ad.png">

        </div>


        <div data-role="content">
            <div id="product" align="center">
                <img alt="image2" src="images/product.png">

            </div>




            <!-- Style card  -->

            <div id="style" align="center">
                <img alt="image2" src="images/style_card.png">

            </div>
            <!-- Social  -->

            <div id="social" align="center">
                <img alt="image2" src="images/app_store.png"> <img
                    alt="image2" src="images/social.png">
            </div>
        </div>
    </div>

</body>

CSS：

.header{

background-image:url("images/image_bg_inner.png");

width:200px;

background-color: #B00C0C;

}

也试过.ui-header ..但它不起作用。请帮帮我，我怎么能这样做..

Answer 1

尝试：

.header {
width:200px;
background-image:url("images/image_bg_inner.png");
}

可能background-color与background-image冲突。

或

为标题添加高度。

.header { width:200px; background-color: #B00C0C; background-image:url("images/image_bg_inner.png"); min-height:70px; }

Answer 2

这对我来说很好。

<style type="text/css">
.ui-header {
  height:200px; /* any height */
  background-image:url(newlogo.png);
  background-repeat:no-repeat;
  background-position:center;
}
</style>

Answer 3

尝试：

.ui-bar-a{
    background-image:url("images/image_bg_inner.png");
    width:200px;
    background-color: #B00C0C;
}

如果你正在使用另一个主题更改为.ui-bar-b等，那么宽度200px在该元素上看起来很奇怪？

标题的背景图像

3 个答案: