文章/答案/技术大牛

发布

社区首页 >问答首页 >在渐变背景上对png进行中心化

问在渐变背景上对png进行中心化
EN

Stack Overflow用户

提问于 2016-01-27 07:33:46

回答 2查看 49关注 0票数 2

我试图在我的渐变背景上设置一个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>

我知道绝对位置不适用于保证金，然而，这是唯一能让png出现在背景上而不是留下空白的方法。我该怎么做呢？

，这就是我现在拥有的，

，这就是我希望它成为的方式

html

css

回答 2

Stack Overflow用户

发布于 2016-01-27 07:38:37

您可以使用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%);
}

<img id="rocket1" src="http://imageshack.com/a/img912/5645/0w5agB.png">

票数 3

Stack Overflow用户

发布于 2016-01-27 07:38:24

你应该加上

display: block;

敬你的火箭

请参阅小提琴

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/35031271

复制

相似问题

问在渐变背景上对png进行中心化
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在渐变背景上对png进行中心化EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在渐变背景上对png进行中心化
EN