CSS背景图片居中代码，半透明显示文字

发布时间：2018-08-28 14:15:29 所属栏目：访谈来源：站长网

导读：CSS控制图片实现始终居中显示，半透明显示文字，不管你如何拉大或缩小浏览器，它始终处于浏览器的中间位置，这是个十分实用的代码，很多时候我们都要用到此种情形的居中。演示： !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www

　　CSS控制图片实现始终居中显示，半透明显示文字，不管你如何拉大或缩小浏览器，它始终处于浏览器的中间位置，这是个十分实用的代码，很多时候我们都要用到此种情形的居中。

　　演示：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>CSS背景始终居中显示</title> <style> body { font: 11px/22px Verdana, Geneva, Arial, Helvetica, sans-serif; background-color: #FFFFFF; background-image: url(/uploads/allimg/1104/peppers1.jpg); background-repeat: no-repeat; background-position: center center; } #content { margin-left: 220px; margin-top: 40px; margin-right: 80px; } </style> </head> <body> <div id="content"> <h1>Chinese style stuffed peppers</h1> <ul> <li>1 tablespoon of oil</li> <li>1 crushed garlic clove</li> <li>Peeled and finely chopped fresh ginger root</li> <li>250g minced pork, beef or Quorn</li> <li>1 chopped spring onion</li> <li>1 chopped celery stick</li> <li>Grated rind of 1 lemon</li> <li>Finely chopped red chilli (optional)</li> <li>4 large green peppers</li> </ul> <p>These stuffed peppers are lovely as a starter, or as a side dish for a Chinese meal. They also go down well as part of a buffet and even children seem to like them.</p> <p>Heat the oil in a wok. Add the garlic and stir fry until golden.</p> <p>Reduce the heat down and then add the ginger and the mince. Liehuo net Stir fry until this is nicely browned then add the other ingredients (apart from the peppers). Stir fry all of this together for a minute, then remove from the heat and allow to cool slightly.</p> <p>Core and remove the seeds of the peppers and cut them into quarters.</p> <p>Divide the mince mixture between these quarters and arrange the peppers in an oven proof dish</p> <p>Cook in a preheated oven at 200C for about 25 minutes then transfer to a serving dish and serve immediately.</p> </div> </body> </html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：PHP编程网 - 湛江站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!