html 图像覆盖图像,图像覆盖（登录）模板 (HTML)

图像覆盖(登录)模板 (HTML)

03/04/2016

本文内容

[ 本文适用于编写 Windows 运行时应用的 Windows 8.x 和 Windows Phone 8.x 开发人员。如果你要针对 Windows 10 进行开发，请参阅 最新文档 ]

定义一项，其中包含一个图像、一个包含大文本的部分和一个包含小文本的部分。 此模板可以与具有网格布局的 ListView 结合使用。有关更多模板，请参阅网格布局的项模板和列表布局的项模板。

要使用该模板

要使用该模板，需将 HTML 和 CSS 样式复制到你的项目中。HTML 包含专用于该模板的 ListView。在你复制 HTML 之后，将 ListView 控件的 itemDataSource 设置为你的应用的数据源，并更新模板的 data-win-bind 属性以便它们能使用你的数据。

HTML

data-win-control="WinJS.Binding.Template">

data-win-bind="src: imageUrl" />

data-win-bind="innerText: largeText">

data-win-bind="innerText: smallText">

data-win-control="WinJS.UI.ListView"

data-win-options="{ itemDataSource: list.dataSource,

itemTemplate: select('#imageOverlayLandingTemplate'),

layout: { type: WinJS.UI.GridLayout } }">

CSS

/* overall list dimensions */

#imageOverlayLanding

{

width:1366px;

height:538px;

}

/*-------------------------------------------------------------------------------------------*/

/* imageOverlay-landing - used on app template landing page */

/*-------------------------------------------------------------------------------------------*/

/* starting margin */

#imageOverlayLanding .win-horizontal.win-viewport .win-surface

{

margin: 0px 115px;

}

/* individual item dimensions and grid placement */

.imageOverlayLanding

{

width: 250px;

height: 250px;

overflow: hidden;

display: -ms-grid;

-ms-grid-columns: 1fr;

-ms-grid-rows: 1fr;

}

/* image */

.imageOverlayLanding .imageOverlayLandingImage

{

width: 100%;

height: 100%;

overflow: hidden;

}

/* overlay properties */

.imageOverlayLanding .imageOverlayLandingOverlay

{

-ms-grid-row-align: end;

background-color: rgba(0,0,0,0.65);

height: 85px;

line-height: 20px;

overflow: hidden;

padding: 5px 12px 0px 12px;

}

/* text line 1 */

.imageOverlayLanding .imageOverlayLandingOverlay .imageOverlayLandingOverlayText

{

width: 220px;

height: 60px;

overflow: hidden;

color: rgb(255,255,255);

}

/* text line 2 */

.imageOverlayLanding .imageOverlayLandingOverlay .imageOverlayLandingOverlayTextLight

{

width: 220px;

height: 20px;

white-space: nowrap;

overflow: hidden;

color: rgba(255,255,255,0.49);

}

相关主题