Image and File

Add a file by markup.
A PDF

Add a file by href.
fx-3650P_3950P_EN

Add an image by markup.

One way around this is to size images in relative units, rather than absolute pixel dimensions. The most common relative solution is to set the max-width of the image at 100%. Specifying only the width of images may cause a doubling or tripling of the cycles that many browsers must process to layout the new, resized page. While each of these cycles typically take less than a millisecond, they stack up, especially if there are multiple scalable elements on the page. Addressing height in the same declaration can reduce this issue.

A better, albeit more complex approach to fluid images is to measure the width of the image as a percentage of the overall width of the page. For example, let’s say you had an image that had a natural size of 500px × 300px in a 1200px wide document. Below 1200px, the document will be fluid. The calculation of how much width the image takes up as a percentage of the document is easy: (500 / 1200 ) × 100 = 41.66%.

We can plug this number in as the width for the image; typically, this would be done inline, as each image will often be a different dimension. For this method, put the image before the text.

Place text over image, this is combination of background url and position. For background, the width and height of the image should be included. The border-radius is set to 10px which overwrites the default in poole.css file.

Place text over image, position not accurate.

Place text over image, by table, position not accurate. No border-radius attribute here. So border angle is sharpe.

Place text over image. border-radius is acctually attribute of img. Attention: border-radius, margin max-width and overflow is already specified in poole.css and lanyon.css files. Here is just a complete example to show the method. rgb(255,255,255) is called fallback color for compatibility issue in that some browsers does not support rgba. Similarly, this also applies to hsl and hsla.

(text accurately positioned)

Place text over image with CSS file support with css support. The znhoo.css style file is already added to _include/head.html.

(text to appear at the bottom left of the image)

(text to appear at the top right of the image)

Use the last two methods! They are very good and complete.

Reference

CSS Fluid Image Techniques for Responsive Site Design
background-image
Text Blocks Over Image
Background Images
请问如何利用html代码在一个图片上加上文字
请问怎样能用css作出文字叠加在图片上的效果
CSS: Placing text over an inline image
fallback color