Question

当一个放置在另一个的顶部时，我试图将与Facebook的封面和个人资料图像相似的效果存档。我试图这样添加css：

.profileImage{
    position: relative !important;
    z-index: -1 !important;
}

它不会改变任何东西。如果重要的话，我的封面照片在<Image>标签中，我的个人资料在<Avatar>标签中。谢谢：）

Answer 1

使用正确的CSS，您可以轻松完成。

这里有个例子：

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  <meta charset="utf-8">

  <title>MVC with XmlView</title>

  <style>
    .profileImage {
      position: absolute !important;
      margin-top: 50px !important;
      margin-left: -100px !important;
    }
  </style>

  <!-- Load UI5, select "blue crystal" theme and the "sap.m" control library -->
  <script id='sap-ui-bootstrap' src='https://sapui5.hana.ondemand.com/resources/sap-ui-core.js' data-sap-ui-theme='sap_belize_plus' data-sap-ui-libs='sap.m' data-sap-ui-xx-bindingSyntax='complex'></script>


  <!-- DEFINE RE-USE COMPONENTS - NORMALLY DONE IN SEPARATE FILES -->

  <!-- define a new (simple) View type as an XmlView
		 - using data binding for the Button text
		 - binding a controller method to the Button's "press" event
		 - also mixing in some plain HTML
		 note: typically this would be a standalone file -->

  <script id="view1" type="sapui5/xmlview">
    <mvc:View xmlns="sap.m" xmlns:f="sap.f" xmlns:mvc="sap.ui.core.mvc" controllerName="my.own.controller">
      <Image src="http://via.placeholder.com/350" height="150px"></Image>
      <f:Avatar class="profileImage"></f:Avatar>
    </mvc:View>
  </script>


  <script>
    // define a new (simple) Controller type
    sap.ui.controller("my.own.controller", {});

    /*** THIS IS THE "APPLICATION" CODE ***/
    // instantiate the View
    var myView = sap.ui.xmlview({
      viewContent: jQuery('#view1').html()
    }); // accessing the HTML inside the script tag above
    // put the View onto the screen
    myView.placeAt('content');
  </script>

</head>

<body id='content' class='sapUiBody'>
</body>

</html>

SAPUI5覆盖两个图像

1 个答案: