将png居中放在渐变背景上

时间:2016-01-27 07:33:46

标签: html css

我试图将png放在我的渐变背景之上,但我无法让它工作。



html {
  height: 100%;
  background-color: red;
  background: -webkit-linear-gradient(#02747A, #48266C); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(#02747A, #48266C); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(#02747A, #48266C); /* For Firefox 3.6 to 15 */
  background: linear-gradient(#02747A, #48266C); /* Standard syntax */
}
#rocket1 {
  height: 300px;
  width: auto;
  margin-left: auto;
  margin-right: auto;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/octicons/3.1.0/octicons.min.css">
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <img id="rocket1" src="http://imageshack.com/a/img912/5645/0w5agB.png">
    <script src="https://cdn.jsdelivr.net/jquery/2.1.3/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script src="script.js"></script>
  </body>
</html>
&#13;
&#13;
&#13;

我知道绝对位置不适用于保证金,但是,这是我可以在背景上获取png而不是留下空白区域的唯一方法。我该怎么办?

这就是我现在所拥有的

enter image description here

这就是我想要的

enter image description here

2 个答案:

答案 0 :(得分:3)

您可以使用{@link #getService}position: absolute

执行此操作

transform: translate()
html {
  height: 100%;
  background-color: red;
  background: -webkit-linear-gradient(#02747A, #48266C); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(#02747A, #48266C); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(#02747A, #48266C); /* For Firefox 3.6 to 15 */
  background: linear-gradient(#02747A, #48266C); /* Standard syntax */
}

#rocket1 {
  height: 70%;
  width: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

答案 1 :(得分:2)

你应该添加

[RequiredIf("HaveExperiance", true, ErrorMessage = "The error message")]
public string ProductName { get; set; }

[RequiredIf("HaveExperiance", true, ErrorMessageResourceName = "ResourceName", ErrorMessageResourceType = typeof(YourResourceType))]
public string ProductName { get; set; }

到你的#rocket1

请参阅Fiddle