Question

所以我是新的反应原生（和一般的javascript），我试图实现这个目标：

所以基本上这是一个带有文字的图像，但略微偏离图像顶部。

这就是我得到的：What I get

正如您所看到的那样，当文本不在图像中时，它不会被渲染。

这是我使用的代码：

using System;
using System.ComponentModel;
using System.Windows.Forms;

namespace WindowsFormsApplication1
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
            backgroundWorker1.WorkerReportsProgress = true;
            backgroundWorker1.RunWorkerAsync();
        }

        private void GetIPInfo()
        {
            try
            {
                System.Diagnostics.Process proc = new System.Diagnostics.Process();
                proc.StartInfo.FileName = "ipconfig.exe";
                proc.StartInfo.UseShellExecute = false;
                proc.StartInfo.CreateNoWindow = true;
                proc.StartInfo.RedirectStandardOutput = true;
                proc.OutputDataReceived += (sender, e) => 
                     backgroundWorker1.ReportProgress(0, e.Data);
                proc.Start();
                proc.BeginOutputReadLine();
                proc.WaitForExit();
            }
            catch (Exception err)
            {
                string myerr = err.ToString();
            }
        }

        private void backgroundWorker1_DoWork(object sender, DoWorkEventArgs e)
        {
            GetIPInfo();
        }

        private void backgroundWorker1_ProgressChanged(object sender,
                                                       ProgressChangedEventArgs e)
        {
            if (!(e.UserState == null))
            {                
                listBox1.Items.Add(e.UserState.ToString()); 
            }
        }
    }
}

这就是css：

if(isset($_POST['search']))
{

$searchg=$_POST['search'];

$searchg=preg_replace("#[^a-z0-9.]#i", "", $searchg);

$query="SELECT * FROM user WHERE uploadfilename LIKE '%$searchg%'";
$res=$con2->query($query);

$cont=mysqli_num_rows($res);
if($cont==0){
    $output="not such as information finds";
}

 else{


   while($row=mysqli_fetch_array($res,MYSQLI_BOTH)){
    $filename = $row['uploadfilename'];
    $conte = $row['content'];

    $output.='<div>'.$filename.'</div>';
 }

}

}





   ?>

我怎样才能做到这一点？

谢谢：）

Answer 1

我想为什么你无法得到理想的答案，因为 Text 位于 Image 组件中。因此当某些部分超出图像时将无法显示。

我的方法是使用属性位置。我刚刚创建了一个简单的例子。 https://rnplay.org/apps/rpv82A

请记住react-native中的属性 z-index 取决于渲染顺序。 https://github.com/facebook/react-native/issues/698

Answer 2

您可以使用以下CSS属性来实现此目的：

<强> position

使用此方法，您只需使用3个元素：div，img和h2

HTML

<div class="img-box">
    <img src="http://science-all.com/images/wallpapers/league-of-legends-wallpaper/league-of-legends-wallpaper-20.jpg" />
    <h2>TEXT</h2>
</div>

CSS

.img-box {
margin-top: 50px;
width: 450px;
height: 200px;
position: relative;
}

.img-box img {
    width: 100%;
    height: auto;
}

.img-box h2 {
    width: 125px;
    height: 40px;
    position: absolute;
    top: -25%;
    left: 5%;
    font-size: 28pt;
    text-align: center;
    background-color: limegreen
}

尝试此代码后，您可以更改CSS中的值以满足您的需求，因为您尊重此结构。

＆＃13;

.img-box {
  margin-top: 50px;
  width: 450px;
  height: 200px;
  position: relative;
}
.img-box img {
  width: 100%;
  height: auto;
}
.img-box h2 {
  width: 125px;
  height: 40px;
  position: absolute;
  top: -25%;
  left: 5%;
  font-size: 28pt;
  text-align: center;
  background-color: limegreen
}

＆＃13;

<div class="img-box">
  <img src="http://science-all.com/images/wallpapers/league-of-legends-wallpaper/league-of-legends-wallpaper-20.jpg" />
  <h2>TEXT</h2>
</div>

＆＃13;

如何将文字放在图像上

2 个答案:

您可以使用以下CSS属性来实现此目的：

尝试此代码后，您可以更改CSS中的值以满足您的需求，因为您尊重此结构。